Flutterのマテリアル構造とレイアウト

👆を参考に進めていきたいと思います。

MDC-102 Flutter: マテリアルの構造とレイアウト

AppBarの最小構成

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TutorialHome(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example title'),
      )
    );
  }
}

• ScaffoldウィジットのappBarプロパティにAppBarウィジットを渡している
• AppBarウィジットのtitleプロパティにTextウィジットを渡している
  

アイコンを追加する

• AppBarウィジット
  • leadingプロパティにIconButtonウィジットを渡す
  • leadingプロパティは、Widget型の単一のウィジェットを受け取る
• IconButtonウィジット
  • iconプロパティにIconウィジットを渡す
  • onPressedに渡されるのは、引数を取らない無名関数であり、ボタンが押されたときに実行されるコールバック関数
• iconに渡されるIconウィジット
  • Iconsクラスの静的メンバーであるIcons.menuを渡す
    • Icons.menuは、メニューアイコンの形状やスタイルなどの情報を保持するIconDataオブジェクト
  • semanticLabel: 'menu'
    • アイコンの意味を説明するラベル

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TutorialHome(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(
            Icons.menu,
            semanticLabel: "menu",
            ),
            onPressed: () { print("hello"); },
        ),
        title: const Text('Example title'),
      )
    );
  }
}

バーの右側にアイコンを追加する

• AppBarウィジット
  • actionsプロパティを追加する
    • actionsに指定されたウィジェットは、AppBarの右側に配置される
    • actionsプロパティは、List<Widget>型のリストを受け取る
    • リストであるため、複数のウィジェットを [] で囲んで指定する

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TutorialHome(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(
            Icons.menu,
            semanticLabel: "menu",
            ),
            onPressed: () { print("menu!"); },
        ),
        actions: <Widget>[
          IconButton(
            onPressed:  () {print("alarmed!");}, 
          icon: const Icon(
            Icons.access_alarm,
            )
          ),
          IconButton(
            onPressed: () {print("searched!");}, 
            icon: const Icon(
              Icons.search,
              )),
        ],
        title: const Text('Example title'),
      )
    );
  }
}