Flutter在间隔基础上设置floatactionbutton文本

Question

I have the following widget which will fit into a different parent widget into its body section. So in the parent widget I call this widget as below body: MapsDemo(), . The issue now is that at this section I run an interval where every 30 seconds I want to call api to get all the latest markers. Currently I print the count down as this codes print("${30 - timer.tick * 1}"); My issue is very simple I have 3 three floating action button and I have given them their id. Thus on each count down for the last floatingaction button which is btn3.text I am trying to set its value as ${30 - timer.tick * 1} but it does not work on this basis. How can I update the count down in the button?

class MapsDemo extends StatefulWidget {
  @override
  State createState() => MapsDemoState();
}

class MapsDemoState extends State<MapsDemo> {
  GoogleMapController mapController;
  @override
    void initState() {
      super.initState();      
      startTimer(30);
    }

    startTimer(int index) async {

      print("Index30");
      print(index);
      new Timer.periodic(new Duration(seconds: 1), (timer) {
        if ((30 / 1) >= timer.tick) {
          print("${30 - timer.tick * 1}");
          btn3.text = ${30 - timer.tick * 1};
        } else {
          timer.cancel();
          var responseJson = NetworkUtils.getAllMarkers(
                   authToken
               );
          mapController.clearMarkers();
          //startTimer(index + 1);
        }
      });

  }

 //Map<PermissionGroup, PermissionStatus> permissions = await PermissionHandler().requestPermissions([PermissionGroup.contacts]);import 'package:permission_handler/permission_handler.dart';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          body: Stack(
            children: <Widget>[

              GoogleMap(
                  onMapCreated: (GoogleMapController controller) {
                   mapController = controller;

                 },
                initialCameraPosition: new CameraPosition(target: LatLng(3.326411697920109, 102.13127606037108))
                ),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Align(
                    alignment: Alignment.topRight,
                    child: Column(
                    children: <Widget>[  
                     FloatingActionButton(
                      onPressed: () => print('button pressed'),
                      materialTapTargetSize: MaterialTapTargetSize.padded,
                      backgroundColor: Colors.lightBlue,
                      child: const Icon(Icons.map, size: 30.0),
                      heroTag: "btn1",

                     ),
                    SizedBox(height: 5.0),
                    FloatingActionButton(
                        onPressed: () => print('second  pressed'),
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                        backgroundColor: Colors.lightBlue,
                        child: const Icon(Icons.add, size: 28.0),
                        heroTag: "btn2",
                      ),
                      SizedBox(height: 5.0),
                      FloatingActionButton(
                        onPressed: () => print('second  pressed'),
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                        backgroundColor: Colors.lightBlue,
                        child: const Icon(Icons.directions_bike, size: 28.0),
                        heroTag: "btn3",

                      ),
                    ]
                  )
                  ),
                ),
            ]

         )
    );
  }
}

Answer 1

The below will display a countdown from 30 seconds inside of a FloatingActionButton .

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FAB Countdown Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const _defaultSeconds = 30;
  Timer _timer;
  var _countdownSeconds = 0;

  @override
  void initState() {
    _timer = Timer.periodic(Duration(seconds: 1), (Timer t) => _getTime());
    super.initState();
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  void _getTime() {
    setState(() {
      if (_countdownSeconds == 0) {
        _countdownSeconds = _defaultSeconds;
      } else {
        _countdownSeconds--;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        title: const Text('FAB Countdown Demo'),
      ),
      floatingActionButton: FloatingActionButton(
          child: Text('$_countdownSeconds'), onPressed: () {}),
    );
  }
}