FlutterのWidgetの基礎part1

# はじめに
最近SwiftだけではなくFlutterについても勉強し始めたので、Flutterの基礎を備忘録として書いてみます。

## Widget
FlutterのUIを構築しているパーツのことをWidgetと呼びます。
様々なWidgetを組み合わせることでUIを構築していきます。

## MaterialApp Widget
MaterialApp Widgetは、Flutterフレームワークで作成されたアプリケーションのルートとなるウィジェットで、アプリのテーマやナビゲーション、ローカライズなどのアプリ全体の管理を行う役割のWidgetです。
このMaterialApp Widgetのおかげでマテリアルデザインでのアプリ開発が容易となっています。
※マテリアルデザインとは、Googleが提唱したデザインシステムの一種で、直感的な操作を可能にし、異なるデバイスやプラットフォーム間での一貫したユーザー体験（UX）を実現することを目指しているものです。

## Scaffold Widget
Scaffoldはflutterで頻繁に使われるwidgetの一つで、主にアプリの画面の骨組みを作成する役割があります。
画面上部にAppbar(アプリバー)を表示し、中央にbody(本文)などの様々なwidgetを表示する役割も持っています。
Scaffoldは足場という意味があります。

## Appbar Widget
Appbarは、アプリの画面上部に表示されるヘッダー領域を定義するために使用されます。
Appbar内には、タイトル、アクションボタンやアイコンなどのWidget、背景色やAppbarの高さを指定するなどの役割を持っています。
```
Scaffold(
  appBar: AppBar(
    // 左側のアイコン
    leading: Icon(Icons.arrow_back),
    // タイトルテキスト
    title: Text('Hello'),
    // 右側のアイコン一覧
    actions: <Widget>[
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.favorite),
      ),
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.more_vert),
      ),
    ],
  ),
)
```

## Column Widget
縦にWidgetを並べるときは、Column　Widgetを使います。
childrenプロパティに並べたい複数のWidgetを設定することで、設定したWidgetを縦に並べることができます。

使用例
```
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.white,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.green,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.red,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
               ],
          ),
        ),
      ),
    ),
  );
}
```
縦に並べて配置できるので、画面レイアウトの基本のWidgetとして使用されています。


## Row Widget
横にWidgetを並べるときは、Column　Widgetを使います。
childrenプロパティに並べたい複数のWidgetを設定することで、設定したWidgetを横に並べることができます。

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.white,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.green,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.red,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
               ],
          ),
        ),
      ),
    ),
  );
}
```

横に並べて配置できるので、画面レイアウトの基本のWidgetとして使用されています。

## まとめ
今回書いたWidget以外にも基本的なものはありますが、また次回の記事でまとめていきたいと思います。
参考になれば幸いです！
最後までご覧いただきありがとうございました！