プログラミング、フリーダイビング、ブロックチェーンのブログ

プログラミング道場

私がおすすめするプログラミング教材のまとめ【書籍と動画】

プログラミング言語 スクリプト言語 コンパイル言語 アプリ開発 サーバー、インフラ、セキュリティなど 機械学習系 ゲーム開発 データベース 子供向け デザイン その他 おまけ まとめ この記事では、様々な書籍を紹介しました。 是非、自分に合 ...

続きを見る

【Flutter入門】様々なレイアウトの作成方法

更新日:

記事の内容


Flutterでは様々なレイアウトを組むことができます。
この記事では、様々なレイアウトの作成方法を紹介します。

ColumnとContainer

左上に並べる

Textを追加して、範囲をミニマムに指定

  • デバッグモードで見ています
  • Container内にテキストを追加しました
  • Columnの範囲を最小にしました

左下に表示

  • mainAxisAlignmentを追加

左の真ん中に表示

左側に均等に表示

左側に表示

右側に表示

  • crossAxisAlignmentを追加
  • 空のContainerとwidth: double.infinityを追加

真ん中だけ伸ばして、右側に表示

伸ばして表示

  • CrossAxisAlignment.stretch

spaceをあける

  • SizedBox

RowとContainer

上に均等に並べる

左上にStretchしながら表示

  • Rowに変更
  • heightではなく、widthを使う

右下に表示

テキストをセンターに配置

TextをCenterで囲ってやります。
また、「計算する」の下に、少し余白が欲しいので、「padding: EdgeInsets.only(bottom: 20.0)」を設定しています。

ColumnとRowの組み合わせ

card

  • Cardを使っています
  • Fontも変えています


まとめ

この記事では、Flutterのlayoutの紹介をしました。

Good luck for your engineer life!

関連コンテンツ

-Flutter, プログラミング

Copyright© プログラミング道場 , 2020 All Rights Reserved Powered by AFFINGER4.