いろいろ備忘録日記

主に .NET とか Go とか Flutter とか Python絡みのメモを公開しています。

Flutterメモ-03 (最小構成でHelloWorld)

概要

Flutterでプロジェクトを作る際に

$ flutter create app1

のようにすると思いますが、この場合サンプルアプリが最初から実装済みとなって作られます。

とても便利なのですが、最初に覚えていこうとする場合は情報過多になるので、個人的にこういうのは最小構成からスタートして勉強するようにしています。

実行環境

実行環境は WSL2 上に構築したFlutterの環境です。

devlights.hatenablog.com

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".

f:id:gsf_zero1:20210721023519p:plain

参考情報

flutter.dev


過去の記事については、以下のページからご参照下さい。

  • いろいろ備忘録日記まとめ

devlights.github.io

サンプルコードは、以下の場所で公開しています。

  • いろいろ備忘録日記サンプルソース置き場

github.com

github.com

github.com