11月3日 進捗日記[自分用]

作業内容

・レイアウトの作成

学習した内容

・TextFieldをRow()の中にネストする時の注意点
・余白の作り方

TextFieldをRow()の中にネストする時の注意点

Row()の中にTextFieldをネストするとRow()が中のサイズがわからないためにエラーになる。
そのため、TextFieldのサイズを指定してRow()に教えてあげる必要がある。

ただ、Row()の他のオブジェクトのサイズとの兼ね合いを把握する必要がありめんどくさい。

そんな時には、Flexible()を使うと解決する。
 Flexibleの中に入れると自動でいい感じにサイズを決めてくれる。

            　　　Flexible(
                 child: Container(
                   padding: EdgeInsets.all(5),
                   child: TextField(
                     decoration: InputDecoration(
                       //外枠をつける
                       border: OutlineInputBorder(),
                       hintText: '調整',
                     ),
                     style: TextStyle(
                       color: Colors.blueAccent,
                       fontSize: 20.0,
                     ),
                   ),
                 ),
               ),

レイアウトに関するエラーが出たときはこいつを使ってみてもいいかも
(ちゃんとは理解していない)

余白の作り方

レイアウトを作る時には余白が結構重要な気がする。
基本的に余白はpaddingを使う。
ただ、使い方が今把握しているところだと2種類ある。
一つはContainerなどの中の引数にpadding:がある場合。
この場合はそこに設定すればいい。

child: Container(
                   padding: EdgeInsets.all(5),
                   child: TextField(
                     decoration: InputDecoration(
                       //外枠をつける
                       border: OutlineInputBorder(),
                       hintText: '調整',
                     ),
                     ),
                   ),
                 ),

EdgeInsets.all(5),は四方に5だけ余白を作るという意味
上だけとか、右だけとかの指定もできるっぽい

二つ目はPadding()で囲う方法。これはText()などのpadding:を持たない場合に使う。

    Padding(
                 padding: EdgeInsets.all(5.0),
                 child: Text('${_sum[1]}', style: TextStyle(fontSize: 36),),
               ),

囲った上で、その中にpadding:を追加する。こうすることでText()に余白を追加できる。

感想など

Padding()とかGestureDetector()とか、外から囲んで何かの効果を与える系の書き方がflutterでは多そう。

現状

明日の作業

・内部処理の実装