【Flutter】フローティングアクションボタン(FloatingActionButton)実装【日本語】

Flutterでフローティングアクションボタン(FloatingActionButtonを作成してみた。

オマケで複数のフローティングアクションボタンを設定する方法もメモ。

他のプログラミングに関する記事はこちら

スポンサーリンク

フローティングアクションボタンとは

フローティングアクションボタンとは、モバイルとかでサイトを見ているときによくある、右下に常駐するボタンです。

大抵、右下に常駐するボタンをクリックすることで最上部に戻るような仕組みを用意している気がしますが、それです。

このサイトでも、モバイルで見た場合は出てます。

今回はそれをFlutterで実装してみます。

スポンサーリンク

単純なフローティングアクションボタン実装

単純なフローティングアクションボタンを作成するには、Scaffold内にfloatingActionButtonを設定し、その中でFloatingActionButtonを設定すればOKです。

具体的には以下の18~24行目が該当する記載方法です。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        appBar: AppBar(
          title: Text("フローティングアクションボタン")
        ),
        
        body: Text('Hello World'),
        floatingActionButton: FloatingActionButton(
          onPressed: () => {
            // フローティングアクションボタンを押された時の処理.
            print("フローティングアクションボタンをクリック")
          },
          child: Icon(Icons.accessibility_new)
        ),
      ),
    );
  }
}

 

で、以下みたいになります。

ボタンを押すことで、「フローティングアクションボタンをクリック」の文字を出力しています。

 

細かく説明すると、onPressed属性に押されたときの処理内容を記載し、child属性にアイコンを設定すればOKです。

ちなみに、iconは以下サイトをご参照ください(Flutterの公式ページ)

Icon(Icons.xxxxxxx)の「xxxxxxx」部分に、以下サイトのiconの名称を設定してあげれば、そのアイコンが使えます。

API docs for the Icons class from the material library, for …

スポンサーリンク

文字つきのフローティングアクションボタン実装

アイコンだけでなく、以下みたいなフローティングアクションボタンを実装することもできます。

 

アイコン+「文字設定」という文字をいれたフローティングアクションボタンを設定しています。

やり方は以下の通りで、17~24行目で設定しています。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        appBar: AppBar(
          title: Text("フローティングアクションボタン")
        ),
        body: Text('Hello World'),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () => {
            // フローティングアクションボタンを押された時の処理.
            print("フローティングアクションボタンをクリック")
          },
          icon: new Icon(Icons.accessibility_new),
          label: Text("文字設定"),
        ),
      ),
    );
  }
}

 

アイコンだけの場合は「FloatingActionButton」で設定していましたが、文字もつけたい場合は「FloatingActionButton.extended」で設定していきます。

onPressedにクリックされたときの処理を書くのは同じ。

icon属性に、Iconクラスをnewして設定することでアイコンを設定することが出来ます。

そしてlabel属性に設定したテキストが、テキストとして表示されます。

スポンサーリンク

複数のフローティングアクションボタン実装

あまり実装しているサイトやアプリを見たことがないですが、複数のフローティングアクションボタンを実装することも出来ます。

実装は以下の通り、18~39行目で実装しています。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        appBar: AppBar(
          title: Text("フローティングアクションボタン")
        ),
        
        body: Text('Hello World'),
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            // 上のFAB
            Align(
              child: FloatingActionButton.extended(
                onPressed: () => {print("上")},
                icon: new Icon(Icons.accessibility_new),
                label: Text("文字設定"),
              ),
            ),
            
            // 下のFAB
            Align(
              alignment: Alignment.bottomRight,
              child: FloatingActionButton(
                onPressed: () => {print("下")},
                child: Icon(Icons.add_box_rounded),
              ),
            ),
          ],
        )
      ),
    );
  }
}

 

結果は以下の通り。

クリックした箇所に応じて、ちゃんとonPressedで設定した処理が実行されます。

 

詳細は……見ればわかるかもしれませんが、Scaffold内にfloatingActionButton属性にColumnを設定し、そのColumn内でFloatingActionButtonを設定している感じ。

Columnでしか試してないですが、Rowとか使えば横並びで複数のフローティングアクションボタンとかも設定できるはずです。

他のプログラミングに関する記事

プログラミングまとめ

プログラミングに関する記事です。 言語とかツールごとにまとめています。 スポンサーリンク [adcode] Flutter ・簡単導入~サンプルアプリのデバック起動まで ・文字の表示(重ねて[…]

IMG

スポンサーリンク