web-dev-qa-db-ja.com

Flutterで2つのフローティングアクションボタンを作成する方法

1つのフローティングアクションボタンでカウンターアプリを作成しました。

カウンターをリセットするためのボタンをもう1つ追加したい場合、下部のバーに2番目のフローティングアクションボタンを追加できますか？

また、私はvoidセクションにメソッドを追加する必要がありますか、それともカウンターのリセット機能はありますか？

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,
    );
  }
}
dartflutterflutter-layoutflutter-test
10
fluttertalk

flutter_speed_dialパッケージを使用できます： https://pub.dartlang.org/packages/flutter_speed_dial

上記のリンクには、それを使用する方法を示す例があります。 SpeedDialクラスを使用する必要があります。children[]では、SpeedDialChildを使用していくつかのボタンを追加できます。以下のサンプルは2つのFABを示しています。

使用例：

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))
          ],
        );
  }

結果：

enter image description here

9
Augusto

中投稿 によると

2つのFABを子として列（垂直方向の配置の場合）または行ウィジェット（水平方向の配置の場合）を使用して、ヒーロータグをnullに設定するか、異なるヒーロータグを割り当てることができます。

2
Ko Lynn