[Flutter]テキスト付きのFloatingActionButtonを表示するには？

どうも、ちょげ(@chogetarou)です。

テキストとアイコンが一緒になっているFloatingActionButtonを表示する方法を紹介します。

方法

テキスト付きのFloatingActionButtonを表示するには、「extended」コンストラクタを使います。

FloatingActionButtonをそのまま使うのではなく、「FloatingActionButton.extebed」のようにします。

「extended」コンストラクタを使う場合は、引数が次のようになります。

• icon : アイコン
• label : テキスト
• onPressed : タップ処理

引数「icon」にアイコン、引数「label」にテキストを設定します。

以下は、実際の使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {},
        label: Text('Add'), //テキスト
        icon: Icon(Icons.add), //アイコン
      ),
      body: Center(),
    );
  }