1. ホーム
  2. ヒラメキ

[解決済み】行の中のテキストフィールドでレイアウト例外が発生する。Unable to calculate size

2022-04-03 17:58:34

質問

レンダリング例外が発生し、修正する方法がわかりません。3つの行を持つ列を作成しようとしています。

行[画像]

行 [TextField ]。

行[ボタン]

以下は、コンテナを構築するための私のコードです。

Container buildEnterAppContainer(BuildContext context) {
    var container = new Container(
      padding: const EdgeInsets.all(8.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          buildImageRow(context),
          buildAppEntryRow(context),
          buildButtonRow(context)
        ],
      ),
    );
    return container;
  }

と、テキストコンテナ用のbuildAppEntryRowコード

Widget buildAppEntryRow(BuildContext context) {
    return new Row(
      children: <Widget>[
        new TextField(
          decoration: const InputDecoration(helperText: "Enter App ID"),
          style: Theme.of(context).textTheme.body1,
        )
      ],
    );
  }

実行すると、以下のような例外が発生します。

I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674):   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

buildAppEntryRowをTextFieldに変更すると、次のようになります。

 Widget buildAppEntryRow2(BuildContext context) {
    return new TextField(
      decoration: const InputDecoration(helperText: "Enter App ID"),
      style: Theme.of(context).textTheme.body1,
    );
  }

例外は発生しなくなりました。行の実装で何が欠けていて、その行のサイズを計算できない原因になっているのでしょうか?

解決方法を教えてください。

(を使用していると思われます)。 Row の横に他のウィジェットを配置したいからです。 TextField を、将来的には)

は、その Row ウィジェットは、フレキシブルでない子プロセスの本質的なサイズを決定したいのです。しかし TextField は固有の幅を持たず、親コンテナの幅いっぱいの大きさになるようにしか知らないのです。これを Flexible または Expanded を伝えるために Row を期待していることを示します。 TextField が残りのスペースを占めます。

      new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              decoration: const InputDecoration(helperText: "Enter App ID"),
              style: Theme.of(context).textTheme.body1,
            ),
          ),
        ],
      ),