【Flutter/Dart】Scaffoldの使い方！アプリバーやドロワーの実装方法

Scaffold定義
class Scaffold extends StatefulWidget {

  const Scaffold({
    super.key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.persistentFooterAlignment = AlignmentDirectional.centerEnd,
    this.drawer,
    this.onDrawerChanged,
    this.endDrawer,
    this.onEndDrawerChanged,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
    this.restorationId,
  });
}

サンプルコード
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}

Scaffold定義
/// Scaffoldの上部に表示されるappBar
final PreferredSizeWidget? appBar;

appBar: AppBar(
  // 背景色
  backgroundColor: Theme.of(context).colorScheme.inversePrimary,
  // アプリバーに表示したい文字列
  title: Text(widget.title),
),

AppBar(
  title: Text("登録"),
  actions: [
    IconButton(
      onPressed: () { add(context); }, 
      icon: Icon(Icons.check)
    ),
  ],  
)

Scaffold定義
/// Scaffoldの主なコンテンツ。
///
/// [appBar] の下、アンビエント [MediaQuery] の [MediaQueryData.viewInsets] の下部の上、および [floatingActionButton] と [drawer] の後ろに表示されます。[resizeToAvoidBottomInset] が false の場合、オンスクリーン キーボードが表示されても本体のサイズは変更されません。つまり、`viewInsets.bottom` によってインセットされません。
///
/// Scaffoldの本体のWidgetは、AppBarとScaffoldの下部の間の使用可能なスペースの左上に配置されます。代わりにこのWidgetを中央に配置するには、[Center] Widgetに配置し、それを本体にすることを検討してください。代わりにこのWidgetを展開するには、[SizedBox.expand] に配置することを検討してください。
///
/// 通常は画面に収まるWidgetの列があるが、オーバーフローする可能性があり、その場合はスクロールする必要がある場合は、Scaffoldの本体として [ListView] を使用することを検討してください。これは、本体がスクロール可能なリストである場合にも適しています。
final Widget? body;

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      const Text(
        'You have pushed the button this many times:',
      ),
      Text(
        '$_counter',
        style: Theme.of(context).textTheme.headlineMedium,
      ),
    ],
  ),
),

Scaffold定義
/// [body] の上の右下隅に浮かんで表示されるボタン。
///
/// 通常は [FloatingActionButton]。
final Widget? floatingActionButton;

floatingActionButton: FloatingActionButton(
  onPressed: _incrementCounter,
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

Scaffold定義
/// [body] の横に表示されるパネルで、モバイル デバイスでは非表示になっていることがよくあります。左から右 ([TextDirection.ltr]) または右から左 ([TextDirection.rtl]) にスワイプします。
///
/// 通常は [Drawer] です。
///
/// ドロワーを開くには、[ScaffoldState.openDrawer] 関数を使用します。
///
/// ドロワーを閉じるには、[ScaffoldState.closeDrawer]、[Navigator.pop]
/// のいずれかを使用するか、キーボードの Esc キーを押します。
///
/// {@tool dartpad}
/// モバイルでドロワーの端のスワイプを無効にするには、[Scaffold.drawerEnableOpenDragGesture] を false に設定します。次に、[ScaffoldState.openDrawer] を使用してドロワーを開き、[Navigator.pop] を使用して閉じます。
///
/// ** examples/api/lib/material/scaffold/scaffold.drawer.0.dart のコードをご覧ください **
/// {@end-tool}
final Widget? drawer;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("ドロワーの例")),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              const DrawerHeader(
                decoration: BoxDecoration(color: Colors.blue),
                child: Text(
                  "メニュー",
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
              ListTile(
                leading: const Icon(Icons.home),
                title: const Text("ホーム"),
                onTap: () {
                  print("ホームが選択されました");
                },
              ),
              ListTile(
                leading: const Icon(Icons.settings),
                title: const Text("設定"),
                onTap: () {
                  print("設定が選択されました");
                },
              ),
            ],
          ),
        ),
        body: const Center(child: Text("メイン画面")),
      ),
    );
  }
}