東北TECH道場Flutter講座のUI/UX改善例をやってみた

2020/8/18/に東北TECH道場Flutter講座に参加しました．
今回はFlutterについて様々な勉強会で登壇されている，[神原健一さん](https://twitter.com/korodroid)のお話をお伺いしました．

そのお話の中でも「UI/UXの改善例」が興味深かったので，実際に手を動かしてみてアウトプットしてみるといった内容です．
何かツッコミなどあれば編集リクエストかコメントかTwitterでいただければ修正いたします 

#今回学ぶこと
・FlutterでのUI/UXの改善例
①paddingをつける
②外枠をつける
③ラベルをつける

#目指す成果物
こちらのように，Textを入力するためのWidgetのUI/UX改善をしてみます．

|before|after|
|---|---|
|![スクリーンショット 2020-08-18 22 07 03](https://user-images.githubusercontent.com/38001967/90516635-3e548e80-e19f-11ea-961e-3ae6ea67ca30.png)|<img width="330" src="https://user-images.githubusercontent.com/38001967/90517492-6c869e00-e1a0-11ea-950a-67e089ba3eb0.gif">|

beforeのコードはこちらです．

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text(
              'Book',
              style: TextStyle(
                color: Colors.grey,
              ),
            ),
            backgroundColor: Colors.white,
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                TextField(),
                TextField(),
                RaisedButton(
                  onPressed: () {},
                  color: Colors.blue,
                  child: Text(
                    'Tap',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          )),
    );
  }
}

```
#ステップ
###1. 余白（padding)をつける

やり方は，このようにPadding()でTextFile()をネストしてあげるとpaddingが設定できます．

```
Padding(
 padding: const EdgeInsets.all(8.0),
 child: TextField(),
),
```

全体のコードはこちらです．

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text(
              'Book',
              style: TextStyle(
                color: Colors.grey,
              ),
            ),
            backgroundColor: Colors.white,
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(),
                ),
                RaisedButton(
                  onPressed: () {},
                  color: Colors.blue,
                  child: Text(
                    'Tap',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          )),
    );
  }
}
```

###2. 外枠(border)をつける

外枠をつけると，こんなイメージです．
![スクリーンショット 2020-08-18 22 06 12](https://user-images.githubusercontent.com/38001967/90516790-752aa480-e19f-11ea-9685-8410ca6f8894.png)

やり方は，このようにTextFiled()内で`decoration: InputDecoration(border: OutlineInputBorder(),`を加えると外枠が設定できます．

```
Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextField(
    decoration: InputDecoration(border: OutlineInputBorder(),
  ),
),
```

全体のコードはこちらです．

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text(
              'Book',
              style: TextStyle(
                color: Colors.grey,
              ),
            ),
            backgroundColor: Colors.white,
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                    decoration: InputDecoration(border: OutlineInputBorder()),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                    decoration: InputDecoration(border: OutlineInputBorder()),
                  ),
                ),
                RaisedButton(
                  onPressed: () {},
                  color: Colors.blue,
                  child: Text(
                    'Tap',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          )),
    );
  }
}
```

###3. ラベルをつける

ラベルをつけると，こんなイメージです．
![スクリーンショット 2020-08-18 22 05 32](https://user-images.githubusercontent.com/38001967/90516802-7a87ef00-e19f-11ea-9e5b-357839108411.png)

やり方は，このようにTextFiled()内で`labelText: 'title',`を加えるとラベルが設定できます．

```
Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextField(
    decoration: InputDecoration(
    labelText: 'title', border: OutlineInputBorder()),
  ),
),
```

全体のコードはこちらです．

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text(
              'Book',
              style: TextStyle(
                color: Colors.grey,
              ),
            ),
            backgroundColor: Colors.white,
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                    decoration: InputDecoration(
                        labelText: 'title', border: OutlineInputBorder()),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                    decoration: InputDecoration(
                        labelText: 'author', border: OutlineInputBorder()),
                  ),
                ),
                RaisedButton(
                  onPressed: () {},
                  color: Colors.blue,
                  child: Text(
                    'Tap',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          )),
    );
  }
}

```

このようにテキストの入力するときに，ラベルが外枠に重なるように表示されるようになります．

以上でUI/UX改善例は終了です．

#ソースコード
Github:
https://github.com/syuheifujita/flutter-tech-dojo-fix-ui

#参考資料
###登壇された神原健一さんの各種アカウント
神原健一さんのTwitter： https://twitter.com/korodroid

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【東北TECH道場】で発表させていただいた資料です。「Flutterアプリ開発入門」です。非公開セミナーですが、登壇資料は公開できる内容にしました。興味ありましたらご参照ください。あえて基本を中心にお話させていただきました。お疲れ様でした😀<a href="https://t.co/mUTfmxmJc2">https://t.co/mUTfmxmJc2</a><a href="https://twitter.com/hashtag/%E6%9D%B1%E5%8C%97TECH%E9%81%93%E5%A0%B4?src=hash&amp;ref_src=twsrc%5Etfw">#東北TECH道場</a> <a href="https://twitter.com/hashtag/flutterjp?src=hash&amp;ref_src=twsrc%5Etfw">#flutterjp</a></p>&mdash; Kenichi Kambara (@korodroid) <a href="https://twitter.com/korodroid/status/1295694766160506880?ref_src=twsrc%5Etfw">August 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

HP： http://www.iplatform.org/blog/profile

###東北TECH道場
http://tohokutechdojo.appspot.com/
<img width="1014" alt="スクリーンショット 2020-08-18 22 01 36" src="https://user-images.githubusercontent.com/38001967/90516016-65f72700-e19e-11ea-8884-fe643c4c0b62.png">

#おわりに：他にもっとわかりやすい方法あれば教えてください
もしかすると，情報が古かったり間違っていたり，他にもっとわかりやすい方法があるのかもしれません．
皆さんの中で上手に使い方をまとめているかたがいればぜひ教えてください！
Twitterやコメントなどでお待ちしています．質問でもお気軽に！