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

https://docs.flutter.dev/codelabs#designing-a-flutter-ui

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

### [MDC-102 Flutter: マテリアルの構造とレイアウト](https://codelabs.developers.google.com/codelabs/mdc-102-flutter?hl=ja#3)

#### AppBarの最小構成
```dart
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`ウィジットを渡している
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215907/8990b4e2-69e4-5e14-d2a9-b6390c40c8ff.png)


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

```dart
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'),
      )
    );
  }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215907/ec219d27-4403-fbc8-bde1-baf8e58ab904.png)

#### バーの右側にアイコンを追加する
+ `AppBar`ウィジット
    + `actions`プロパティを追加する
        + `actions`に指定されたウィジェットは、`AppBar`の右側に配置される
        + `actions`プロパティは、`List<Widget>`型のリストを受け取る
        + リストであるため、複数のウィジェットを [] で囲んで指定する
```dart
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'),
      )
    );
  }
}

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1215907/53b945e4-da9f-8dec-48a9-87c5aa951d84.png)