【Flutter】AppBarでアプリのヘッダーを作る方法を徹底解説！【サンプルコードあり】

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key key}) : super(key: key);
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // 画面に表示させるAppBarのindex
  int displayIndex = 0;

  // いろんなAppBarを格納
  List<Widget> appBarList = [
    AppBar(
      title: Text('1,ただのAppBar'),
    ),
    AppBar(
      title: Text('2,テキストを中央に表示'),
      centerTitle: true,
    ),
    AppBar(
      title: Text('3,左にアイコン'),
      centerTitle: true,
      leading: Icon(Icons.menu),
    ),
    AppBar(
      title: Text('4,右にアイコン'),
      centerTitle: true,
      actions: [Icon(Icons.add), Icon(Icons.clear)],
    ),
    AppBar(
      title: Text('5,影をなくす'),
      centerTitle: true,
      elevation: 0,
    ),
    AppBar(
      title: Text('6,色を変える'),
      centerTitle: true,
      backgroundColor: Colors.red,
    ),
    AppBar(
      title: Text('7,画像を表示する'),
      centerTitle: true,
      flexibleSpace: Image.network(
        'https://sozaino.site/wp-content/uploads/2021/10/mahou32-1280x720.png',
        fit: BoxFit.cover,
      ),
    ),
    AppBar(
      title: Text('8,高さを変える'),
      centerTitle: true,
      toolbarHeight: 150,
    ),
  ];

  // ボタン選択時に画面を更新
  void selectedButton(int index) {
    setState(() {
      displayIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBarList[displayIndex],
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => selectedButton(0),
              child: Text('1,ただのAppBar'),
            ),
            ElevatedButton(
              onPressed: () => selectedButton(1),
              child: Text('2,テキストを中央に表示'),
            ),
            ElevatedButton(
              onPressed: () => selectedButton(2),
              child: Text('3,左にアイコン'),
            ),
            ElevatedButton(
              onPressed: () => selectedButton(3),
              child: Text('4,右にアイコン'),
            ),
            ElevatedButton(
              onPressed: () => selectedButton(4),
              child: Text('5,影をなくす'),
            ),
            ElevatedButton(
              onPressed: () => selectedButton(5),
              child: Text('6,色を変える'),
            ),
            ElevatedButton(
              onPressed: () => selectedButton(6),
              child: Text('7,画像を表示する'),
            ),
            ElevatedButton(
              onPressed: () => selectedButton(7),
              child: Text('8,高さを変える'),
            ),
          ],
        ),
      ),
    );
  }
}

AppBar(
  title: Text('1,ただのAppBar'),
),

AppBar(
  title: Text('2,テキストを中央に表示'),
  centerTitle: true,
),

AppBar(
  title: Text('3,左にアイコン'),
  centerTitle: true,
  leading: Icon(Icons.menu),
),

AppBar(
  title: Text('4,右にアイコン'),
  centerTitle: true,
  actions: [Icon(Icons.add), Icon(Icons.clear)],
),

AppBar(
  title: Text('5,影をなくす'),
  centerTitle: true,
  elevation: 0,
),

AppBar(
  title: Text('6,色を変える'),
  centerTitle: true,
  backgroundColor: Colors.red,
),

AppBar(
  title: Text('7,画像を表示する'),
  centerTitle: true,
  flexibleSpace: Image.network(
    'https://sozaino.site/wp-content/uploads/2021/10/mahou32-1280x720.png',
    fit: BoxFit.cover,
  ),
),

AppBar(
  title: Text('8,高さを変える'),
  centerTitle: true,
  toolbarHeight: 150,
),

...
return Scaffold(
  appBar: appBarList[displayIndex],
...