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

×

投稿
Flutter FutureBuilder と StreamBuilder

Future 非同期処理 値を取得すると処理が終了 Stream 非同期処理 ストリームが開いている間、ずっと値が流れてくる 12345678910111213141516171819202122var controller = StreamController&lt;int&gt;();var s

AndroidStudioでFlutterコードフォーマット設定

Android Studioで、Flutterのコードフォーマット設定をする。 次の2箇所にチェックを入れればOK - Format code on save - Oragnize imports on save

Android Studio Line行数の設定

Android Studioで、1行の行数をセットをする。 Editor &gt; Code Style &gt; Dart &gt; Line Length

Android Studio のショートカットキー

コード整形Command + Option + L キーを押す Git CommitCommand + K キーを押す Git PushCommand + Shift + K キーを押す クイックアクションOption + Enter キーを押す 文脈に応じた便利な機能を呼び出す 定義元へジャンプC

AWS ALBへのIPアドレス直アクセスを防ぐ

問題点クラウド型WAFを導入している場合、IPアドレスでELBに直アクセスされると、WAFによるセキュリティチェックを回避されてしまう。 ELB設定 ALB(Appliation LoadBalancer) &gt; 「リスナー」タブを選択 「HTTP:80」のルール表示 HTTPのアクセスは、HT

Pages
Page not found

ページが見つかりませんでした

プライバシーポリシー

本アプリのご利用によって、本規約に同意していただいたものとみなします。 個人情報第三者に個人を特定できる情報を提供する事はありません。 データ解析アプリの利便性向上のため、匿名で個人を特定できない範囲で最新の注意を払い、アクセス解析をしております。例えば、アプリのクラッシュ時にどんな原因でクラッシュ

アプリ紹介

シンプルなToDoアプリ シンプルなToDoアプリ 複雑な機能はありません。スマートフォン初心者でも悩まず使えます。 データはクラウドに自動保存。機種変更しても、ログインすれば以前のデータを引き継いで利用可能。複数の端末からでも利用可能です。 機能 ログイン（メールアドレス） カテゴリを作成 カテゴ

カテゴリ
FlutterFlutter
Android StudioAndroid-Studio
AWSAWS
DartDart
コマンドコマンド
タグ
DartDart
FlutterFlutter
Android StudioAndroid-Studio
ショートカットショートカット
AWSAWS