Yukii

主にプログラミング(Flutter)についての記事を書いています。

FlutterでTextFormFieldの枠が表示されない時

今回は、下のスクリーンショットのようにフォームを表示したい時に調べたことを書こうと思います。
f:id:muscle_girl:20200313160816j:plain


やりたいこと
一行の中でテキストフォームの前後にテキストを配置したい。

試してダメだった方法
Rowの中にTextとTextFormFieldをそのまま配置する。

ダメだった理由
Rowの子要素は固有の長さを持っていなければいけません。
TextFieldは固有の値を持っていないためRowの中でうまくいかないというカラクリでした。


解決策
TextFormFieldをFlexibleまたはExpandedで囲んで、TextFormFieldの幅をRowに伝えてあげました。
ちなみに、
Expandedとは、Row(Column)の中のWidgetを固定の比率で配置するWidgetです。
Flexibleとは、Widgetに応じて柔軟に比率を変更した状態で,それぞれのWidgetを配置します。よってFlexibleを利用した場合,childの要素の幅に応じて柔軟に比率を変更して表示することになります。


参考資料はこちら
stackoverflow.com
qiita.com

コード
実際、上のスクリーンショットを表現するためのコードは以下になります。

Row(
        children: <Widget>[
          SizedBox(
            width: 80.0,
            child: Text(
              "年齢",
            ),
          ),
          Expanded(
            flex: 1,
            child: TextFormField(
                maxLines: 1,
                keyboardType: TextInputType.number,
                autofocus: false,
                decoration: InputDecoration(
                  hintText: 'Age',
                  border: OutlineInputBorder(
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(0.0),
                    ),
                    borderSide: BorderSide(
                      width: 0.0,
                    ),
                  ),
                ),
                validator: (value) {
                 // validateの実装を書く
                },
                onSaved: (value) {
                 // saveした時実装したい関数を書く
                }),
          ),
          Padding(
            padding: EdgeInsets.only(left: 10),
          ),
          SizedBox(
            width: 20.0,
            child: Text(
              "歳",
            ),
          ),
        ],
      ),