$ git clone https://github.com/flutter/flutter.git -b stable
$ export PATH="$PATH:/PATH_TO_Flutter_Repo/bin"
$ flutter precache
$ flutter doctor
$ flutter create my_app
// デバイス一覧
$ emulator -list-avds
or
$ avdmanager list avd
// エミュレータの起動
$ emulator -avd Pixel_3a_API_29
// エミュレータの起動で
// > PANIC: Missing emulator engine program for 'x86' CPU.
// と出る場合は、 /PATH_TO_SDK/tools/emulator ではなく /PATH_TO_SDK/emulator/emulator を 利用する。
$ open -a Simulator
$ flutter devices
> Android SDK built for x86 • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)
$ flutter --device-id emulator-5554 run
| Componentの種類 | 内容 |
|---|---|
| MaterialApp | Material用のApplicationクラス |
| Scaffold | Material用のLayoutクラス(AppBarやDrawerのような要素を表示できる) |
| AppBar | ナビゲーションヘッダーに相当 |
| Container | PlaneなViewに相当 |
| Text | TextView |
| ListView | ListView |
| Image.asset | ImageView |
| EdgeInsets | paddingなどに利用する |
| Row | 横方向に小要素を配置していく |
| ListTile | 事前に要素を決められたRowのようなもの |
| Column | 縦方向に小要素を配置していく |
| Expanded | RowやColumnをWrap(子要素に含む形)する形で利用する。スペースいっぱいに表示することができる。 |
| Icon | IconData用のImageViewに相当 |
| MainAxisAlignment | 主軸(Rowなら横)の方向に対して、自分(要素)自身がどこにいるべきか?(center・start・end・etc…) |
| CrossAxisAlignment | 主軸(Rowなら横)の直交方向に対して、自分(要素)自身がどこにいるべきか?(center・start・end・etc…) |
| MainAxisSize | 自分(要素)自身が親要素いっぱいに描画(sizing)されるべきか、最小であるべきか?(max・min) |
| Text#softWrap | falseの場合、水平空間が無限にあるかのようにテキストをレイアウトする。 |
| Widget | UI(レイアウト要素やUI要素)を構築するための基底クラス |
| Center | 子要素をCenterに配置できるWidget |
| SizedBox | 子要素のサイズを制限できる。 |
| Card | カード表示を行うためのWidget |
| GridView | GridView |
| Stack | UIの上にUIが重なるようなUI実装をするためのWidget |
### Resourceを読み込む(assets)
flutter:
assets:
- images/lake.jpg
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled; //・・・(1)
void main() {
debugPaintSizeEnabled = true; //・・・(2)
runApp(MyApp ());
}