FlutterからHelloWorld #Flutter

はじめに

モバイル開発がしてみたいと思い、Flutterに入門しました。
FLutterは公式チュートリアルでHelloWorldしていないので、ここに備忘します。

使用技術

Flutter 2.8.1
環境はiOS,Android,Webのどれでも可

開発環境構築

ここではflutter doctorが正常に完了したとします。

Flutterの公式Documentが素晴らしいです。

　→ https://docs.flutter.dev/get-started/install

デフォルトアプリを見渡す

Flutterは初期状態ではカウンターアプリが用意されています。
そのデフォルトアプリが以下のコマンドで起動するか確認しましょう。

flutter run

main.dart を紐解く

lib フォルダ下にある main.dart が Flutter アプリケーションを開発するためのスタート地点です。

main.dart には冒頭に以下の記述があります。

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

import 文ではそのプロジェクトで利用可能なパッケージを各ファイルで参照可能にするために使用します。パッケージだけではなく、別のファイルに記述した実装を参照するためにも使用します。

main メソッドと runApp メソッド

mainメソッドは Flutter の実行時にプログラムのエントリーポイントとして扱われるもので、全ての処理（実装した分）についてはmainメソッドを起点に動き始めます。

runApp()はFlutterのプロジェクト上で最初に展開して欲しい Widget を指定します。Widgetはここでは「FlutterのUIを構築しているパーツ」と認識してください。runApp()がなければ、Widgetはただの Dart プログラムとして動作します。

Flutter アプリ開発においては、とりあえず "main から始まって、runApp を呼んだところから Widget が必要になるんだね" ということを覚えておいてください。

Flutter では全てが Widget である

Flutterが公式に「Flutter では全てが Widget である」と言っているので、MaterialAppにしてもCupertinoAppにしても、とりあえずは「なんか部品があってそれを組み合わせて作るんだ」とざっくり考えましょう。

テンプレートのMyApp Widgetについて考えましょう。

main.dart

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

さて、Flutter は全てが Widget だと言いましたが、Widget もクラスです。Flutter を動かす上で必要な機能がモリモリのったクラスです。次に StatelessWidget ですね。これについてはStatefulWidgetと並べて別の記事で取り上げます。
とりあえず、よく使う Widget のひとつです。

const MyApp({Key? key}) : super(key: key);
@override

これらについてはまた別の記事でまとめます。

アプリの大掃除

コメント類を消す
FAB(Floating Action Button)を消す
AppBar を消す
StatefulWidget を消して StatelessWidget へ変更する
画面中央に HelloWorld を表示する

ここまでで以下の状態だと思います。

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pokemon Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'Hello World',
          style: TextStyle(
            fontSize: 36,
          ),
        ),
      ),
    );
  }
}

ここまでで覚えたいこと

Flutter は Widget でできている
Widget は Dart のクラスである
基本の Widget に StatelessWidget と StatefulWidget がある

感想

言葉にできない楽しさがFlutter開発にはある。