はじめに
モバイル開発がしてみたいと思い、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 には冒頭に以下の記述があります。
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について考えましょう。
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 を表示する
ここまでで以下の状態だと思います。
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開発にはある。