创建了带有一个浮动操作按钮的计数器应用程序.

如果我想再添加一个重置计数器的按钮,我可以在哪里添加底部栏的第二个浮动操作按钮?

此外,我必须在无效部分添加任何方法,或者是否有任何重置计数器功能可用?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Counter App'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text('You have pressed the button $_counter times.'),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _counter++;
            }),
        tooltip: 'Increment Counter',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

推荐答案

你可以使用flutter_speed_dial套餐:https://pub.dartlang.org/packages/flutter_speed_dial

在上面的链接中,有一个示例演示如何使用它.你必须使用SpeedDial类,在children[]上你可以添加一些SpeedDialChild的按钮.下面的示例显示了两个晶圆厂.

使用它的示例:

Widget _getFAB() {
        return SpeedDial(
          animatedIcon: AnimatedIcons.menu_close,
          animatedIconTheme: IconThemeData(size: 22),
          backgroundColor: Color(0xFF801E48),
          visible: true,
          curve: Curves.bounceIn,
          children: [
                // FAB 1
                SpeedDialChild(
                child: Icon(Icons.assignment_turned_in),
                backgroundColor: Color(0xFF801E48),
                onTap: () { /* do anything */ },
                label: 'Button 1',
                labelStyle: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.white,
                    fontSize: 16.0),
                labelBackgroundColor: Color(0xFF801E48)),
                // FAB 2
                SpeedDialChild(
                child: Icon(Icons.assignment_turned_in),
                backgroundColor: Color(0xFF801E48),
                onTap: () {
                   setState(() {
                      _counter = 0;
                   });
                },
                label: 'Button 2',
                labelStyle: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.white,
                    fontSize: 16.0),
                labelBackgroundColor: Color(0xFF801E48))
          ],
        );
  }

Result:

enter image description here

Flutter相关问答推荐

如何增加容器高度?

底部导航栏项目在抖动中不更改 colored颜色

material 3芯片,不能go 除输入芯片小部件上的轮廓

从外部类动态更改IconButton的图标

Flutter 块消费者仅对特定的状态属性更改做出react

我怎样才能go 掉这个底部导航栏上的白色背景

将记录/元组用作SplayTreeMap中的键

Flutter 渲染HTML和数学(LaTeX和Katex)

Flutter飞溅屏幕即使在修改后仍显示默认徽标和背景色

Flutter 构建 Web 分段故障 - 无法启动事件处理程序线程

无法在 Flutter 项目中安装最新版本的 image_picker

自定义绘画未显示 - Flutter

Flutter底部面板局部显示

为什么我们需要使用ChangeNotifierProvider而不是仅仅使用ChangeNotifier?

Flutter - firebase_auth_web 5.4.0 依赖于 intl ^0.17.0 但我必须使用更高版本 (intl ^0.18.0)

使用 Riverpod 和 copyWith 方法更新数据类中列表中变量的值

在向 Google Route API 发送 HTTP Post 请求期间发生错误,

flutter 中 // 和 /// 有什么区别

Flutter HLS .m3u8 视频无法实时播放

Flutter - 使用 pin 进行身份验证