RowExpanded を使って横並びで均等に要素を並べてみます。

縦方向に要素を並べる

Row は横方向に要素を並べるためのウィジットです。 children に並べたい要素を配列として要素を入れていきます。

各要素には、 Expanded を入れていきます。

例えば、

Row(children: <Widget>[
  Expanded(child: Container(
    child: Text("1"),
    color: Colors.red,
  ),),
  Expanded(child: Container(
    child: Text("2"),
    color: Colors.green,
  ),),
  Expanded(child: Container(
    child: Text("3"),
    color: Colors.blue,
  ),),
],
)

のようにします。

Expanded には、 flex というプロパティがあり、同じ階層の要素との大きさの上下関係を指定します。 デフォルトは 1 なので、同じ階層に並んだ、 Expanded は、全て同じ大きさになります。

コードの例

例えば、コードは以下のようになります。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'わかりやすい'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(child: Row(children: <Widget>[
        Expanded(child: Container(
          padding: EdgeInsets.all(20.0),
          child: Text("1"),
          color: Colors.grey,
        ),),
        Expanded(child: Container(
          padding: EdgeInsets.all(20.0),
          child: Text("2"),
          color: Colors.red,
        ),),
        Expanded(child: Container(
          padding: EdgeInsets.all(20.0),
          child: Text("3"),
          color: Colors.green,
        ),),
        Expanded(child: Container(
          padding: EdgeInsets.all(20.0),
          child: Text("4"),
          color: Colors.blue,
        ),),
      ],),),
    );
  }
}

スクリーンショット

このように、各要素が均等に並びます。

参考リンク