LoginSignup
6
1

AppBarへのアイコンボタン追加

Last updated at Posted at 2021-02-06

下の写真のようなAppBarのツールバーに、アイコンボタンを表示する方法に関して解説していきます。
プロジェクト作成時に生成されるサンプルアプリケーションを元に作成します。

エディターはAndroid Studioです。
私の開発環境は以下です。

flutter --version

Flutter 3.22.0
Tools • Dart 3.4.0 • DevTools 2.34.3

例として今回は初期コードを改良して、増減ボタンを付与したカウントアプリの作成を行います(AppBarをわかりやすくするため色を変更しています)。

スクリーンショット 2024-05-17 20.05.04.png

アイコンボタンの追加

まず、下記のようにScaffoldの中にあるAppBarにコードを追加します。

      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(onPressed: () => {}, icon: const Icon(Icons.add)),
          IconButton(onPressed: () => {}, icon: const Icon(Icons.remove))
        ],
      ),

icon:で表示したいアイコンを選択できます。
constを使用するとパフォーマンスの向上に繋がるようなのでconstを使用して定義しています。

onPressedはアイコンをタップしたときの動作です。
こちらは後ほど追加します。

これで実行をすると、+と-のアイコンが表示されるようになります。

値の増減

では次に、今作成したアイコンをタップし値が増減できるようにします。
_incrementCounter()_decrementCounter()をそれぞれ作成し、onPressed:に追記します。

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(onPressed: () => _incrementCounter(), icon: const Icon(Icons.add)),
          IconButton(onPressed: () => _decrementCounter(), icon: const Icon(Icons.remove))
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '+ボタンで値が上昇、-ボタンで値が減少します:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

これで下の写真のように、値の増減ができるようになります。

スクリーンショット 2024-05-17 20.08.21.png

お疲れ様でした。
ここまでご覧いただきありがとうございます。

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1