概要
Flutterでプロジェクトを作る際に
$ flutter create app1
のようにすると思いますが、この場合サンプルアプリが最初から実装済みとなって作られます。
とても便利なのですが、最初に覚えていこうとする場合は情報過多になるので、個人的にこういうのは最小構成からスタートして勉強するようにしています。
実行環境
実行環境は WSL2 上に構築したFlutterの環境です。
Flutter と Dart のバージョンは以下。
$ flutter --version Flutter 2.2.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision f4abaa0735 (3 weeks ago) • 2021-07-01 12:46:11 -0700 Engine • revision 241c87ad80 Tools • Dart 2.13.4
サンプル
main.dart
の中にもろもろ作られたコードをバッサリ消して、最小構成なサンプルが以下。
import 'package:flutter/material.dart'; void main() { // Flutter では、全てが ウィジェット という考え方。 // (Dart では 全てが オブジェクト という考え方) // // Flutterでは、アプリケーションは runApp() でスタートする。 // runApp() に渡すのも ウィジェット となる。 // // アプリケーションは、基本的に以下の構造で作る // // MaterialApp // └> Scaffold // └> 自分のウィジェット // // - MaterialApp で、タイトルやテーマなどのアプリケーション全体の設定を行う // - Scaffold で、画面の足場の設定を行う // - その中に自分の画面、つまり、ウィジェットを作り込む // // というイメージ。 // // なので、最小構成は以下のようになる。 runApp(MaterialApp( title: 'Basic-01 Minimum', theme: ThemeData.dark(), home: Scaffold( body: Center( child: Text('Basic-01 Minimum'), ), ))); }
以下のような Make ターゲットがあるとします。
.ONESHELL: run: @read -p "ENTER EXAMPLE NAME: " input @for example in $(shell find . -maxdepth 1 -type d -name "[^.]*"); do if [ `echo "$$example" | grep "$$input"` ]; then @echo '======================================================' @echo "[TARGET] $$example" @echo '======================================================' ( cd "$$example"; flutter clean; flutter pub get; flutter format lib/; flutter analyze; flutter run -d web-server --web-renderer html; ) break fi done
実行すると以下のようになります。
$ make ENTER EXAMPLE NAME: minimum ====================================================== [TARGET] ./basic_01_minimum ====================================================== Deleting build... 9ms Deleting .dart_tool... 0ms Deleting .packages... 1ms Deleting Generated.xcconfig... 0ms Deleting flutter_export_environment.sh... 0ms Running "flutter pub get" in basic_01_minimum... 439ms Formatting directory lib/: Unchanged main.dart Analyzing basic_01_minimum... No issues found! (ran in 1.2s) Launching lib/main.dart on Web Server in debug mode... Waiting for connection from debug service on Web Server... 13.3s lib/main.dart is being served at http://localhost:39725 The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow. 🔥 To hot restart changes while running, press "r" or "R". For a more detailed help message, press "h". To quit, press "q".
参考情報
過去の記事については、以下のページからご参照下さい。
- いろいろ備忘録日記まとめ
サンプルコードは、以下の場所で公開しています。
- いろいろ備忘録日記サンプルソース置き場