Flutter

Flutterレイアウト

Containerクラスの基本形

1
2
3
4
5
Container(
  child: ウィジェット,
  padding: [ EdgeInsets ],
  alignment: [ Alignment ]
)

EdgeInsets

内容 設定値
全方向で余白を指定 EdgeInsets.all( [double] )
個別に余白を指定 EdgeInsets.fromLTRB( 左, 上, 右, 下 )
個別に余白を指定 EdgeInsets.only( left:左, top:上, right:右, bottom:下 )
左右に余白を指定 EdgeInsets.symmetric( horizontal:値 )
上下に余白を指定 EdgeInsets.symmetric( vertical:値 )

Alignment

内容 設定値
左上に配置 topLeft
中央上に配置 topCenter
右上に配置 topRight
左中央に配置 centerLeft
中央に配置 center
右中央に配置 centerRight
左下に配置 bottomLeft
中央下に配置 bottomCenter
右下に配置 bottomRight

Columnクラスの基本形

1
2
3
4
5
6
Column(
  mainAxisAlignment: [ MainAxisAlignment ],
  mainAxisSize: [ MainAxisSize ],
  crossAxisAlignment: [ CrossAxisAlignment ],
  children: <Widget>[ ... ]
)

Rowクラスの基本形

1
2
3
4
5
6
Row(
  mainAxisAlignment: [ MainAxisAlignment ],
  mainAxisSize: [ MainAxisSize ],
  crossAxisAlignment: [ CrossAxisAlignment ],
  children: <Widget>[ ... ]
)

MainAxisAlignment

内容 設定値
ウィジェットと順に並ぶ向きで、先頭に配置 start
ウィジェットと順に並ぶ向きで、中央に配置 center
ウィジェットと順に並ぶ向きで、末尾に配置 end
要素間のスペースを均等配置 spaceBetween
要素間のスペースを均等配置、開始終了スペースは自動 spaceAround
要素間のスペースを均等配置、開始終了スペースも均等 spaceEvenly

CrossAxisAlignment

内容 設定値
ウィジェットと交差に並ぶ向きで、先頭に配置 start
ウィジェットと交差に並ぶ向きで、中央に配置 center
ウィジェットと交差に並ぶ向きで、末尾に配置 end
ウィジェットと交差に並ぶ向きで、画面一杯まで要素を広げる stretch

MainAxisSize

内容 設定値
ウィジェットを最小サイズにする min
ウィジェットを最大サイズにする max

Stackクラスの基本形

ウィジェットを重ねて表示する

1
2
3
4
5
6
7
Stack(
  children: <Widget>[
    Container(),
    Container(),
    Container(),
  ]
)

Alignクラスの基本形

ウィジェットごとに配置を指定する

1
2
3
4
5
6
7
Column(
  children: <Widget>[
    Align(alignment: [ Alignment ], child: ウィジェット),
    Align(alignment: [ Alignment ], child: ウィジェット),
    Align(alignment: [ Alignment ], child: ウィジェット),
  ]
)

Expandedクラスの基本形

ウィジェットを画面一杯で均等表示する

1
2
3
4
5
6
7
Column(
  children: <Widget>[
    Expanded(child: ウィジェット),
    Expanded(child: ウィジェット),
    Expanded(child: ウィジェット),
  ]
)

Paddingクラスの基本形

余白を作るのためのウィジェット

1
2
3
4
5
6
7
Column(
  children: <Widget>[
    Expanded(child: ウィジェット),
    Padding(padding: [ EdgeInsets ]),
    Expanded(child: ウィジェット),
  ]
)

SizedBoxクラスの基本形

決まったサイズのウィジェットを使う

1
2
3
4
5
6
7
Column(
  children: <Widget>[
    SizedBox(width: 幅, height: 高さ, child: ウィジェット),
    SizedBox(width: 幅, height: 高さ, child: ウィジェット),
    SizedBox(width: 幅, height: 高さ, child: ウィジェット),
  ]
)
Flutter

Flutter Widget でラップする

Android Studio のショートカット

  1. Widgetを選択

  2. Option + Enter キーを押す

  3. メニューから、Wrap with new widget を押す

フォローする

カテゴリ

タグクラウド

ALB AWS AdMob Android Studio CORS CSRF CloudFront Composer Cookie Dart Firebase Flutter Git Hexo JSON Lambda Laravel Linter Linux PHP PatchManager SSL WEBサービス XSS yum クリックジャッキング ショートカット 個人開発 開発

最近の記事

アーカイブ

タグ

ALB 1
AWS 4
AdMob 1
Android Studio 6
CORS 1
CSRF 1
CloudFront 1
Composer 1
Cookie 1
Dart 8
Firebase 2
Flutter 32
Git 2
Hexo 1
JSON 1
Lambda 1
Laravel 1
Linter 1
Linux 1
PHP 1
PatchManager 1
SSL 1
WEBサービス 1
XSS 1
yum 1
クリックジャッキング 1
ショートカット 3
個人開発 1
開発 3
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×