環境構築編
-
Flutterの環境構築（Mac）
Flutterの環境構築しよう！
-
Android Studioを設定する
Android Studio を Flutter 仕様に変更しましょう。
-
Android エミュレータの設定
Android エミュレータでFlutter のアプリを動かせるようにしましょう。
-
Flutter アプリをビルド
Android Studio を使って、Flutter アプリをビルドしてみましょう。
エディタ編
-
ホットリロードの仕方
Hot Reload と Hot Restart を使って開発効率を上げていきましょう。
-
ショートカットキーを使う
Android Studio で ショートカットキーを積極的に使おう。
-
おすすめのプラグイン
Android Studio に 便利なプラグインをインストールしよう。
ウィジット編
-
文字列を表示する
TextにTextStyleを組み合わせることで、表示する文字列 (テキスト)を好みや用途に合わせてデザインできます。 -
画像を表示する
Imageを使って、アプリ画面に画像を表示します。 -
文字ボタンを表示する
TextButtonを使って、文字ボタンを表示します。 -
立体的なボタンを表示する
ElevatedButtonを使って、立体的なボタンを表示します。 -
ボタンの角を調整する
ElevatedButtonの角を調整することで、角丸の度合いを設定します。
レイアウト編
-
要素のサイズを調整する
Containerを使うと、要素にスペースを与えたり、高さや幅、背景、装飾などを与えることができます。 -
パディング(余白)を調整する
PaddingとEdgeInsetsを組み合わせることで、Widget の内側に余白を持たせることができます。 -
中央に表示する
Centerを使うことで要素を中央に表示します。 -
リストを表示する
ListViewを使って、一覧 (リスト) を表示します。 -
列で縦方向に要素を並べる
列
Columnを使って、縦方向に要素を並べます。 -
行で横方向に要素を並べる
行
Rowを使って、横方向に要素を並べます。 -
スタックで自由に要素を並べる
スタック
Stackを使って、自由に要素を配置し、重ねる (スタックする) ことができます。 -
横並びで均等に要素を並べる
行
RowとExpandedを使って、横並びで均等にかつレスポンシブに要素を並べてみます。 -
セーフエリアに表示する
セーフエリア
SafeAreaを使って、 端末ごとに適切なコンテンツ領域に表示されるようにします。 -
要素の大きさを制限する
ConstrainedBoxとBoxConstraintsを使うことで要素の大きさを制限します。
ライブラリ編
-
ウェブビューを使用する
ウェブビュー
WebViewを使えば、ウェブページをアプリ内に表示することができます。 -
Redux を使う
Redux を使って見通しのよいプログラムを書きます。
-
HTTPにリクエストする
HTTP に情報をリクエストして表示します。
アニメーション編
-
アニメーションで画像を切り替える
2 種類の要素をスムーズに切り替えて表示したい場合は、
AnimatedCrossFadeを使うと便利です。 -
アニメーションをちょっと本格的に実装する
AnimationController、Tween、Curveを使って、アニメーションを実装します。
ルーティング編
-
ルーティングを定義する
Navigatorを使って、ページ遷移を実装します。