Flutterでメモアプリを作る(5)Widget build後

9kai

今回はWidget build後の解説となります。

[範囲]


今回は＠override(改行)Widget buildからプログラムの終わりまでになります。
サンプルコードの全体はこちらになります。

@override
 //実際に表示される部分はWidget build以下に記述します。
 Widget build(BuildContext context) {
   return Scaffold(
       //背景色(白)の設定
       backgroundColor: Colors.white,
       body: Visibility(
         visible: isLoaded,
         child: SingleChildScrollView(
           child: Column(
             children: <Widget>[
               Text(''),
               Text(''),
               Text('tlmemo'),
               Text(''),
               //赤色の部分:緊急/ASAP
               TextField(
                   controller: redController,
                   onChanged: (text) {
                     save('red', text);
                   },
                   minLines: 3,
                   maxLines: 3,
                   maxLength: 150,
                   maxLengthEnforced: true,
                   decoration: InputDecoration(
                     fillColor: Colors.red[200],
                     filled: true,
                     border: OutlineInputBorder(),
                     hintText: '緊急/ASAP',
                   )),
               //黄色の部分:重要/Important
               TextField(
                   controller: yellowController,
                   onChanged: (text) {
                     save('yellow', text);
                   },
                   minLines: 5,
                   maxLines: 5,
                   maxLength: 250,
                   maxLengthEnforced: true,
                   decoration: InputDecoration(
                     fillColor: Colors.yellow[300],
                     filled: true,
                     border: OutlineInputBorder(),
                     hintText: '重要/Important',
                   )),
               //緑色の部分:その他/Other
               TextField(
                   controller: greenController,
                   onChanged: (text) {
                     save('green', text);
                   },
                   minLines: 7,
                   maxLines: 7,
                   maxLength: 350,
                   maxLengthEnforced: true,
                   decoration: InputDecoration(
                     fillColor: Colors.green[300],
                     filled: true,
                     border: OutlineInputBorder(),
                     hintText: 'その他/Other',
                   )),
               Text(''),
               Text(''),
               Link(
                 child: Text('ABOUT'),
                 url: 'https://9vox2.netlify.com/',
                 onError: _showErrorSnackBar,
               )
             ],
           ),
         ),
       ));
 }
}


[解説]


<使っていること>


このアプリで使用しているウィジェットはText、TextField、Linkの3つです。
ウィジェット以外ではこのコードではVisibility、SingleChildScrollViewを使用しています。


<背景色(白)の設定>

        //背景色(白)の設定
       backgroundColor: Colors.white,


bodyの前に背景色の指定を行います。
Colors.の後に英語で色名を指定するとその色になります。
VisualStudioCodeの場合、色指定の後に色名の部分にマウスカーソルを合わせると似た色の一覧が色見本と共に表示されます。
右横のバーを上下に動かすことができます。

(参考サイト)
https://api.flutter.dev/flutter/material/AppBar/backgroundColor.html
公式、英語


<Visibility>

        body: Visibility(
         visible: isLoaded,


私自身がteratailの回答で知った概念なので現在解説できません。

参考リンクをご覧ください。

(参考リンク)

公式、英語

貴重な日本語解説



<SingleChildScrollView>


検索エンジンで検索をした結果発見した記法です。
パッケージが必要かと思っていましたが、必要ないようです。

(参考サイト)
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
公式、英語


<Text>

                Text(''),


このコードでは改行を入れるためにしか使っていませんが、様々な設定が可能です。

(参考サイト)
https://flutter.dev/docs/development/ui/widgets/text
公式、英語

https://aimana-it.com/how-to-use-text-widget/
サンプルコード豊富でいい記事です。

https://aimana-it.com/widget-of-the-week-41-richtext/
RichTextの紹介動画の内容を邦訳してくれている記事。


<赤色の部分、黄色の部分、緑色の部分>

                //赤色の部分:緊急/ASAP
               TextField(
                   controller: redController,
                   onChanged: (text) {
                     save('red', text);
                   },
                   minLines: 3,
                   maxLines: 3,
                   maxLength: 150,
                   maxLengthEnforced: true,
                   decoration: InputDecoration(
                     fillColor: Colors.red[200],
                     filled: true,
                     border: OutlineInputBorder(),
                     hintText: '緊急/ASAP',
                   )),
               //黄色の部分:重要/Important
               TextField(
                   controller: yellowController,
                   onChanged: (text) {
                     save('yellow', text);
                   },
                   minLines: 5,
                   maxLines: 5,
                   maxLength: 250,
                   maxLengthEnforced: true,
                   decoration: InputDecoration(
                     fillColor: Colors.yellow[300],
                     filled: true,
                     border: OutlineInputBorder(),
                     hintText: '重要/Important',
                   )),
               //緑色の部分:その他/Other
               TextField(
                   controller: greenController,
                   onChanged: (text) {
                     save('green', text);
                   },
                   minLines: 7,
                   maxLines: 7,
                   maxLength: 350,
                   maxLengthEnforced: true,
                   decoration: InputDecoration(
                     fillColor: Colors.green[300],
                     filled: true,
                     border: OutlineInputBorder(),
                     hintText: 'その他/Other',
                   )),


これらの部分はTextFieldで記述しています。
入力が可能なウィジェットにはTextFormFieldなどがあります。
onChanged内でsave関数を呼び出して変更を保存しています。

(参考サイト)
https://flutter.ctrnost.com/basic/interactive/form/textfield/
公式ドキュメントの日本語訳

https://www.virment.com/flutter-how-to-retrive-textfield-form/
TextFieldの使用方法解説記事


<link>

                Link(
                 child: Text('ABOUT'),
                 url: 'https://9vox2.netlify.com/',
                 onError: _showErrorSnackBar,
               )


以前の記事で紹介していたLinkパッケージを使用して自分のホームページへのリンクを設定しています。
広告を貼らない代わりにチップ・募金を募る仕組みにしているので省くことができません。

(参考サイト)
https://pub.dev/packages/link
こちらのReadmeのSampleにサンプルが書かれています。


[終わりに]


これでmain.dartファイルの紹介は終わりです。
次の記事ではVisualStudioCodeでのデバッグ方法を紹介します。


(支援のお願い)


2014年8月下旬に天文学的な確率(50億分の1)で免疫に脳幹を攻撃されました。
多くは後遺症もなく社会復帰できるそうですが、私は意識できる生理機能のほぼ全てに後遺症を負っています。
その影響で就労することが困難です。
よろしければご支援いただけないでしょうか。
noteのサポート機能、Twitterでのマシュマロ(https://marshmallow-qa.com/ffishfd)または
https://9vox2.netlify.com/ にYggDoreでチップをいただけますと幸いです。

この記事が気に入ったらサポートをしてみませんか？