Flutterプログラム解説簡単なメモアプリを作成してみたよ！その１ UI作成編

最近、お仕事でFlutterを使ってアプリ開発しています

Flutterを扱って1年ぐらい経つので、Flutterの解説もしてみようという魂胆ね

UnityよりもFlutterのほうが需要あるしな（汗

今回はFlutterを使ってUI周りの基本的なことについて解説していこうかなと思います

解説動画もあるよ！

大部分は動画で解説していますので、
こちらを見ていただけると嬉しいです！

今回、いつもより詳しく解説した関係で
内容自体はあまり進んでないわね

動画内でも言ってるけど、
このアプリ制作は前座のつもりだったから1回で終えるはずだったんだけどね

初めて解説する内容が多くて
どうしても時間がかかってしまったというわけですね

Githubにプロジェクトをアップロードしてます！

Githubのプロジェクトリンク：https://github.com/Syungetu/text_editor

解説とかはどうでもいい！
ソースを見せろ！といった方はGithubにプロジェクトファイルを上げてますのでご確認ください～

解説をするために作ったプロジェクトなのであまり難しいことしていないのでロジックに参考にできる物は少ないかもね

このプロジェクトを改良して作るのも全然OKだから、気軽にみていってね

このプロジェクトを利用した場合は「すたじお・くろす！」の明記をしていただけるとうれしいです

動画について補足的解説をします

で、15分以上も動画に使っておいて解説しきれなかった箇所がありますので、それについて書いていこうかなと思います

とはいえ深いところまでは解説は出来ないから勘弁してね

深いところまで知りたい方はQiitaとか見たほうが勉強になると思うぞ

当サイトはあくまでも触り部分を扱う感じとなっております（汗

StatelessWidgetとStatefulWidgetの違い

動画でも解説したんですが、
もうちょっと解説させてください

StatelessWidgetとStatefulWidgetの違いだけど、
動画内では静的か動的かの違いって説明したわね

ただ、何に対して静的や動的なのかっていうのを解説してないよね
ユーザーが操作するとかそういうのも動的って言ったりするしね

表示しているテキストが変更されたり、ボタンの数が変わるときが動的という使い方をしますね

逆に言うと、ボタン押せる、チェックボックスにチェックを入れるなどのものは動的ではなく静的な管理になります

この辺がちょっとむずかしいわね、
本来変化しないような要素が変化するときは「動的」になるといった感じかしらね

動的処理の例

String inputText = “入力なし”;

Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
// 入力されたテキスト
Text(inputText),
// テキスト入力

TextField(
onChanged: (String value) {
// 入力されたテキストを反映する
inputText = value;
}
),

// テキスト表示を更新する
TextButton(
onPressed: () {
// 画面を更新する
setState((){});
},
child: Text(“入力確定”),
),
],
),
);
}

Dart用の整形プラグインが無いので、ソースが見づらくてすいません……
とりあえず、上のようなソースコードがあったとするぞ

// テキスト入力

TextField(
onChanged: (String value) {
// 入力されたテキストを反映する
inputText = value;
}
),

上の処理を読み解くと、一番上の行で宣言したtext変数に入力された値を入れてる感じになってます

// 入力されたテキスト
Text(inputText ),

TextにinputTextの変数を入れて文字を表示しようとしているのですが、このままでは入力されたテキストはTextに反映されません

内部的にはinputTextに入力されたテキストが代入されてて変化はしているんだけど、画面更新しない限りはこのテキストが反映されることはないってわけね

// テキスト表示を更新する
TextButton(
onPressed: () {
// 画面を更新する
setState((){});
},
child: Text(入力確定),
),

そこで、更新するためのボタンを用意して、
ボタンを押したら「setState」を呼ぶようにしてるぞ

setStateは画面を更新する関数になるので、これを呼ぶと画面更新が行われ、Text(inputText ),の表示するテキストが更新されるというわけです

とりあえず「Container」で囲っておけ！

これは冬月のおまじないに近いものなのですが、TextやImageなどのWidgetをContainerで囲うようにしています

Container(
// Widget外の余白
margin: EdgeInsets.only(
top: 0,
bottom: 0,
left: 5,
right: 5,
),
// Widget内の余白
padding: EdgeInsets.only(
top: 5,
bottom: 5,
left: 0,
right: 0,
),

width: 100, // 横幅

height: 20, // 高さ

child: Text(“位置調整テキスト”),
),

これがContainerでTextを囲った例になるわ、
余白や幅や高さを指定しているわね

Containerで囲うことで、余白の調整ができたり、幅や高さの設定ができるのでてUIデザインの調整がやりやすいんだよな

FlutterのWidgetはWidgetごとの大きさで管理されているので、そのまま配置するとがたがたになったりすることが多いです

widget間のサイズ感を統一するために冬月はContainerで囲っています

Imageでの画像表示方法

で、アプリ上にタイトルロゴとかオリジナルロゴを
表示したいときとかよくあるわよね

Flutterにはローカル、インターネット上から画像を読み込んで表示することができるぞ

// ローカルから画像を読み込む
Image.asset(‘images/UI/hogehoge.png’), // ネットワークから画像を読み込む
Image.network(‘https://hogehoge.com/sample.jpg’),

こんな感じで画像を表示していきます
ただ、ローカルで表示するときにはpubspec.yamlの編集が必要です

pubspec.yamlの編集

# To add assets to your application, add an assets section, like this:
assets:
– images/
– images/UserIcon/
– images/UI/
# – images/a_dot_burr.jpeg
# – images/a_dot_ham.jpeg

下の方に枠内のような英文があると思うので、底に画像までのディレクトリパスを入力する必要があります
コンパイル時にココを見てアプリに内包するみたいです

次回はリスト表示や読み込み待ちの処理とかを開設予定です

ということで、補足説明的にFlutterの解説をしてみたよ
今回は動画で解説したことが多くて少なくなってしまったわね

解説というか、アドバイスに近い感じになってしまったのは内緒だな（笑

次回はFutureBuilderとかを利用したコードの書き方なんかを説明したいと思います