環境構築編
-
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
を使って、ページ遷移を実装します。