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

Question

我有以下小部件，它将适合不同的父小部件到其正文部分。所以在父小部件中我称这个小部件如下 body: MapsDemo(),。现在的问题是，在这部分我运行一个间隔，我想每隔 30 秒调用一次 api 来获取所有最新的标记。目前我按此代码打印倒计时 print("${30 - timer.tick * 1}"); 我的问题很简单我有 3 个三个浮动操作按钮，我已经给了他们他们的 ID。因此，在最后一个浮动操作按钮 btn3.text 的每次倒计时中，我试图将其值设置为 ${30 - timer.tick * 1} 但在此基础上它不起作用。如何更新按钮中的倒计时？

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

下面将在 FloatingActionButton.

内显示从 30 秒开始的倒计时

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: () {}),
    );
  }
}

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

Flutter set floatingactionbutton text on interval basis

dart

floating-action-button

flutter