Flutterプログラム解説 簡単なメモアプリを作成してみたよ! その1 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とかを利用したコードの書き方なんかを説明したいと思います

“Flutterプログラム解説 簡単なメモアプリを作成してみたよ! その1 UI作成編” への1件の返信

気軽にコメントをどうぞ!

この記事に関すること冬月に聞きたいこと等、小さいことでもコメントしていただける嬉しいです。
冬月に直接連絡したい方は下のお問合せフォームをお使いください。(メール送信されます)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。
※メールアドレスは公開されることは有りません。


The reCAPTCHA verification period has expired. Please reload the page.

プログラム解説の関連記事