【Flutter/Dart】AppBar（画面上部）にボタンを設置する

目次

概要

アプリを作っていると、画面の右上にボタンを設置したい時がよくある。
そんなときにはAppBarの中にactionsを設定することで実現ができる。

ソースコード

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:concentration/TransitionView/TopView.dart';

void main() async{

  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        useMaterial3: true,
      ),
      home: TopView(),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'SubView.dart';

class TopView extends ConsumerWidget {
  const TopView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text("遷移前の画面"),
          actions: [
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () => {
                Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SubView())
                )
              },
            )
          ]
        ),
        body: Container(
          alignment: Alignment.center,
          child: ElevatedButton(
            onPressed: () {
              Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => SubView())
              );
            },
            style: ElevatedButton.styleFrom(
              foregroundColor: Colors.white,
              backgroundColor: Colors.red,
              elevation: 5,
            ),
            child: Text("画面遷移するよ！"),
          ),
        )
    );
  }
}
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class SubView extends ConsumerWidget {
  const SubView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text("遷移後の画面"),
        ),
        body: Container(
          alignment: Alignment.center,
          child: Text("新たなる大地"),
        )
    );
  }
}

デモ動画

詳細

今回の内容は至って簡単だ。
画面の左上にボタンを設置するには、画面の表示をしているTopViewのAppBarにactionsという引数にUIを設置してあげればいい。

今回の場合、この部分だ。

actions: [
  IconButton(
    icon: Icon(Icons.settings),
    onPressed: () => {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => SubView())
      )
    },
  )
]

やっていることは本当に難しくない。
今まではContainerやRowなどの中のchildやchildrenに表示するViewを書いていたが、
今回はactionsに設定するだけだ。

ボタンを押下したした時の書き方も、さまざまなボタンを生成に記載した通りだし、
画面遷移の方法も画面遷移のページで記載した。
こう見てみると、何事もコツコツ積み上げていけばできることは一気に増えていく。

参考ページ