初めてのflutter layouts編_RowとColumn [Memo for neko]

<h1>flutterのレイアウト（layout）の中でも基本的なRowとColumnについて</h1>
（...flutterでアプリを作成しているときに、忘れてしまうので...:robot:)

対象：
・初めてflutterの人:angel:
・少し慣れたけどレイアウト気になる人初めての人:angel:
・アプリの見た目を整えたい人:angel:

==環境==
・PC:Macbook Pro (Retina)
・macOS Catalina
・Flutter 2.0.4 
・Dart 2.12.2
・iOSのシュミレータ

==目次==
1.flutterの新規作成と起動
2.アプリのベース作成
3.Row and Column のレイアウト


<h2>1.flutterの新規作成と起動</h2>
・flutterで新プロジェクト作成(my_appの部分が自分のアプリ名)

```terminal:terminal
flutter create my_app
cd my_app
```
・iOSのシュミレータ起動

```terminal:terminal
open -a Simulator
```

・flutterの起動

```terminal:terminal
flutter run
```

<h2>2.アプリのベース作成</h2>
libの中にある、main.dartの中身を以下に変更

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hi Layout Sample',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Layout Sample'),
        ),
        body: Center(
          child: Text('Hello Flutter'),
        ),
      ),
    );
  }
}
```

こんな感じの画面に。
<img width="200" alt="スクリーンショット 2021-04-20 17.41.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/dd0a8f09-2e69-2f1a-c978-2714f07d2d13.png">

ベース完成⭐️
(後は、いろいろ試してみる)

<h2>3.Row and Column のレイアウト</h2>
<b>Rowのケース例　）</b> 
main.dartを以下に変更すると

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hi Layout Sample',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Layout Sample'),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
            ],
          ),
        ),
      ),
    );
  }
}

```

こんな感じの画面に。
<img width="200" alt="スクリーンショット 2021-04-20 17.53.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/822aff0a-61aa-0345-c7a6-653c9e0c0848.png">

ちょっと説明：
child: 以降を Text から Row に変更し、
children: 以降で、アイコンの ♡ を設定（ここは画像でもなんでも）
さらに、Row 部分を Column に変えると、♡の並びも変わる。

<b>Columnのケース例　）</b> 

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hi Layout Sample',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Layout Sample'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
            ],
          ),
        ),
      ),
    );
  }
}

```

こんな感じの画面に。
<img width="200" alt="スクリーンショット 2021-04-20 18.01.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/0b6e4e59-ea84-d03f-1c3a-674781359e16.png">

<h2>mainAxisAlignment部分について</h2>
mainAxisAlignment: MainAxisAlignment.xxx 部分を変化させる

・**mainAxisAlignment: MainAxisAlignment.start：画面のはじめ**

```dart:main.dart
child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
            ],
          ),
```

こんな感じの画面に、それぞれ"Row", "Column"
<img width="400" alt="スクリーンショット 2021-04-20 20.53.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/f9d704ee-3efb-8c17-3b16-25f0ef493460.png">


・**mainAxisAlignment: MainAxisAlignment.center：真ん中**

```dart:main.dart
child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
            ],
          ),
```

こんな感じの画面に、それぞれ"Row", "Column"
<img width="400" alt="スクリーンショット 2021-04-20 20.53.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/b413cd8d-38cb-cab7-61fc-1df287458008.png">

・**mainAxisAlignment: MainAxisAlignment.end：画面の終わり**

```dart:main.dart
child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
            ],
          ),
```

こんな感じの画面に、それぞれ"Row", "Column"
<img width="400" alt="スクリーンショット 2021-04-20 20.53.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/29b39a89-e919-6c3d-08af-15ca3690f98b.png">


・**mainAxisAlignment: MainAxisAlignment.spaceBetween：子たちの間のスペース均等**

```dart:main.dart
child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
            ],
          ),
```

こんな感じの画面に、それぞれ"Row", "Column"
<img width="400" alt="スクリーンショット 2021-04-20 21.45.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/5cc9382d-a9fe-1d35-0e53-a16b77fbc81a.png">


・**mainAxisAlignment: MainAxisAlignment.spaceEvenly：はじめ・おわり・子の間のスペース均等**

```dart:main.dart
child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
            ],
          ),
```

<img width="400" alt="スクリーンショット 2021-04-20 21.45.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/a68ccbbd-1910-3009-3189-7492a7786f0a.png">

・**mainAxisAlignment: MainAxisAlignment.spaceAround：並べた子の間のスペース均等**

```dart:main.dart
child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
              Icon(Icons.favorite, size: 30),
            ],
          ),
```

こんな感じの画面に、それぞれ"Row", "Column"
<img width="400" alt="スクリーンショット 2021-04-20 20.53.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69607/9481863f-6744-9626-1c55-4ba086e13771.png">


RowとColumnの基本的な部分は、以上を組み合わせて。
もっと興味ある方は、参考資料からどうぞ:)

==参考==
・Flutterの公式　https://flutter.dev/docs
・Dartで使えるiconの種類　https://api.flutter.dev/flutter/material/Icons-class.html
・レイアウト類ですごくおすすめ（英語表記）https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e