Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[Flutter] TextFormFieldとアイコンを横並びに配置しようとするとビルド時にエラーが出た。

状況

日付入力用のテキストフォームとカレンダーアイコンを横並びに設置しようとすると、
ビルド時にエラーが出たので、その解決方法を共有。

修正前のソース

view.dart
Row(
  children: [
     TextFormField(
        keyboardType: TextInputType.number,
        controller: dateController,
        decoration: const InputDecoration(
          labelText: '日付',
          border: OutlineInputBorder(),
        ),
        onSaved: (String value) {
          setState(() {
            dateController.text = value;
          });
        },
      ),
    ),
    IconButton(
        icon: Icon(calendar),
        onPressed: () async {
        //  アイコン押下時のイベント
        }),
  ],
),

エラー内容

EXCEPTION CAUGHT BY RENDERING LIBRARY
The following assertion was thrown during performLayout():
An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.
This happens when the parent widget does not provide a finite width constraint. For example, if the
InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a
SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains it.

TextFormFieldには固有の幅がなく、
親要素の全幅にTextFormFieldのサイズを設定しようとしてエラーが起こっている。

解決方法

Flexible配下に置くことでよしなに幅を調節してくれる。

view.dart
  Flexible(
    //この中にTextFormFieldを設置
  )

修正後のソース

view.dart
Row(
  children: [
    Flexible( // ←追加
      child: TextFormField(
          keyboardType: TextInputType.number,
          controller: dateController,
          decoration: const InputDecoration(
            labelText: '日付',
            border: OutlineInputBorder(),
          ),
          onSaved: (String value) {
            setState(() {
              dateController.text = value;
            });
          },
        ),
    ),
    IconButton(
        icon: Icon(calendar),
        onPressed: () async {
        //  アイコン押下時のイベント
        }),
  ],
),

参照

https://stackoverflow.com/questions/45986093/textfield-inside-of-row-causes-layout-exception-unable-to-calculate-size

dialog-inc
『物流業界をテクノロジーの力でHAPPYに』株式会社ダイアログは、WMS(在庫管理システム)を切り口に、物流業界にテクノロジーの光を当て、物流業界に携わるすべての人がよりHAPPYとなる社会を作っていきます。
https://www.dialog-inc.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away