リファレンス

中央に表示する

URLをコピーする Twitterでシェアする Facebookでシェアする

Center を使うことで要素を中央に表示します。

使い方

Center は要素を中央に表示するためのウィジットです。

Center(
  child: Container(color:Colors.red),
),

のように書きます。

引数 child には、中央に表示したい要素を指定します。

ちなみに、 Center で包まれていない RedContainer は、デフォルトで画面の左上に表示されます。

Align Widget の紹介

実は、Align という Center の拡張版にあたる Widget があります。

Alignalignment を指定することで、中心のみならず、 child を以下の画面のように八つの場所に配置することもできます。

また、alignmentalignment.center に指定すれば、 Center と同じ結果になります。

Align(
  alignment:Alignment.topRight,  // 赤いコンテナを右上に配置する
  child: Container(
    color: Colors.red,
    height: 30,
    width: 30,
  ),
),

CenterAlign を継承していて、alignment が常に Alignment.center に固定されている Align であリます。

参考リンク