Flutter 均等に配置するmainAxisAlignmentが効かない

Question

#mainAxisAlignmentがが効かない

](1a2d076806b86263594041f91add7b3e.jpeg)
上記画像の３つのテキストを縦に均等に配置したいです。

 return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            Card(
              child: Row(
                children: <Widget>[
                  Image.network(
                      'https://image.tmdb.org/t/p/w154//5KYaB1CTAklQHm846mHTFkozgDN.jpg'),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.all(10),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Container(
                            width: double.infinity,
                            // height: 50,
                            child: Text(
                              'Godzilla vs. Kong',
                              style: Theme.of(context).textTheme.headline6,
                              textAlign: TextAlign.left,
                            ),
                          ),
                          Container(
                            width: double.infinity,
                            // height: 20,
                            child: Text(
                              '2021-03-24',
                              style: TextStyle(
                                color: Colors.grey.shade700,
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                          Container(
                            width: double.infinity,
                            // height: 60,
                            child: Text(
                              'In a time when monsters walk the Earth, humanity’s...',
                              textAlign: TextAlign.left,
                            ),
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );

こちらの参考のような形になっているのになぜ効かないのでしょうか？？

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Text("item1"),
    Text("item2"),
    Text("item3"),
    Text("item4"),
  ],
),

ColumnのchildrenがTextではなくContainerだからでしょうか？

だとしたら、Containerの場合はどうすれば良いでしょうか？？😨

Flutterのウィジェット難しすぎて禿げそうです。

Comments

[takapiroid]

添付いただいているスクリーンショットの赤枠はて入力での表示でしょうか？
FlutterInspector > Debug Paint すると描画領域が画面上に表示されると思いますが、
そちらで確認するといかがでしょうか。
またその表示を添付いただけると幸いです。

Answer 1

Dartでは「特に指定がない場合、子ウィジェットが親ウィジェットの大きさを決める」という、慣れるまでは少しトリッキーに感じる実装が行われます。

そのため、Container宣言時に自身の大きさ(widthやheight)を指定しなかった場合は子ウィジェット、この場合は3つのText分の大きさでContainerの大きさが決定されるため、.spaceEvenlyの指定をしても隙間が全く生まれない、という現象が発生します。

対処法は様々ですが、この場合は先にImageを取り出して大きさを指定しておいてあげるのが良いのかなと思いました。

var image = Image.network(
  'https://image.tmdb.org/t/p/w154//5KYaB1CTAklQHm846mHTFkozgDN.jpg',
  height: 200,
);
return Scaffold(
  appBar: AppBar(
    title: Text('Home'),
  ),
  body: Container(
    padding: EdgeInsets.all(20),
    child: Column(
      children: <Widget>[
        Card(
          child: Row(
            children: <Widget>[
              image,  //変更点
              Expanded(
                child: Container(
                  height: image.height,  //変更点
                  padding: const EdgeInsets.all(10),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Container(
                        width: double.infinity,
                        // height: 50,
                        child: Text(
                          'Godzilla vs. Kong',
                          style: Theme.of(context).textTheme.headline6,
                          textAlign: TextAlign.left,
                        ),
                      ),
                      Container(
                        width: double.infinity,
                        // height: 20,
                        child: Text(
                          '2021-03-24',
                          style: TextStyle(
                            color: Colors.grey.shade700,
                          ),
                          textAlign: TextAlign.left,
                        ),
                      ),
                      Container(
                        width: double.infinity,
                        // height: 60,
                        child: Text(
                          'In a time when monsters walk the Earth, humanity’s...',
                          textAlign: TextAlign.left,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    ),
  ),
);

試していませんがこんな感じでいけるのではないでしょうか。
質問者様のコードからの変更点はimage変数で先に画像部分を定義し、Expanded内のContainerでその画像の高さheight: image.heightを指定してあげた部分となります。

Comments

[Gento]

＞Dartでは「特に指定がない場合、子ウィジェットが親ウィジェットの大きさを決める」という、慣れるまでは少しトリッキーに感じる実装が行われます。

こちらの助言で少しだけ理解できるようになりました！
参考になるコードまでありがとうございました！