1. ホーム
  2. flutter

[解決済み] FlutterでListViewをColumnに追加する方法とは?

2022-02-27 17:45:47

質問

Flutterアプリに簡単なログインページを作ろうとしています。 TextFieldsとログイン/サインインボタンはうまく作れました。 横長のListViewを追加したいです。 コードを実行すると私の要素が消えてしまいます。ListViewなしで実行すると、またうまくいきます。どうしたら正しくできるでしょうか?

return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("Login / Signup"),
          ),
          body: new Container(
            child: new Center(
              child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new TextField(
                    decoration: new InputDecoration(
                      hintText: "E M A I L    A D D R E S S"
                    ),
                  ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(obscureText: true,
                    decoration: new InputDecoration(
                      hintText: "P A S S W O R D"
                    ),
                    ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(decoration: new InputDecoration(
                    hintText: "U S E R N A M E"
                  ),),
                  new RaisedButton(onPressed: null,
                  child:  new Text("SIGNUP"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new RaisedButton(onPressed: null,
                  child: new Text("LOGIN"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new ListView(scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    new RaisedButton(onPressed: null,
                    child: new Text("Facebook"),),
                    new Padding(padding: new EdgeInsets.all(5.00)),
                    new RaisedButton(onPressed: null,
                    child: new Text("Google"),)
                  ],)

                ],
              ),
            ),
            margin: new EdgeInsets.all(15.00),
          ),
        ),
      );

解決方法は?

コンソール出力を確認することができます。エラーが表示されます。

performResize() 中に以下のアサーションがスローされました。 水平ビューポートの高さが未束縛である。 ビューポートは横軸に拡張してコンテナを満たし、子ビューポートを拘束してそのコンテナに一致させます。 を使用します。この場合、水平ビューポートは無制限に与えられました。 の垂直方向への拡大が可能です。

水平方向のリストに高さの制約を追加する必要があります。例:高さのあるコンテナで囲む。

Container(
  height: 44.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      RaisedButton(
        onPressed: null,
        child: Text("Facebook"),
      ),
      Padding(padding: EdgeInsets.all(5.00)),
      RaisedButton(
        onPressed: null,
        child: Text("Google"),
      )
    ],
  ),
)