はじめに
FlutterはGoogleが開発した、マルチプラットフォームのモバイルアプリ開発のフレームワークです。Flutterを使うと、AndroidとiOSの両方のプラットフォームで同時にアプリを開発することができます。
また、ブラウザやMacOS、Windowsアプリも作成可能とさまざまなプラットフォームが作成可能になっています。
このチュートリアルでは、Flutterを使ってシンプルなカウンターアプリを開発する手順を紹介します。Flutterを初めて使用する方でも、このチュートリアルを読みながらアプリを開発することができます。
参照）https://docs.flutter.dev/get-started
前提条件
このチュートリアルを完了するには、以下のものが必要です。
- Flutterのインストール
- エディタ（Android Studio、Visual Studio Codeなど）
- シミュレータまたは実機（iOSまたはAndroid）※Chromeでも大丈夫です
flutterのインストールについてはこちらから自身の環境に合わせてインストールします
手順
新しいFlutterプロジェクトを作成する
まず、新しいFlutterプロジェクトを作成します。エディタを開いて、新しいFlutterプロジェクトを作成するために以下のコマンドを実行してください。
flutter create myapp
このコマンドは、myappという名前の新しいFlutterプロジェクトを作成します。
コマンドを打つとプラットフォームを選ぶようにコンソールに指示されます。下記はiosとandroid、webを選択した場合のディレクトリ構造です
myapp/
android/
ios/
lib/
test/
web/flutterのテストについてはこちらを参考にしてください
Flutter Testをマスターする: はじめてのFlutterテストガイド
プロジェクトを作成すると下記のようにすでにカウンターアプリが作成されています。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("カウンター"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
アプリを実行する
アプリを実行するには、以下の手順を実行してください。
※今回はChromeから確認するため、シュミレータなどの準備はしていません
- エディタを開いて、myappプロジェクトのルートディレクトリに移動してください。
- 以下のコマンドを実行してください
flutter run -d chromeこのコマンドで実際にアプリを起動します。-dオプションは実行対象のデバイスを指定するオプションです。
デバイスの指定は下記のようにすると対象のデバイスで実行できます
-d device_id: 物理デバイスのIDを指定します。-d emulator_id: エミュレータのIDを指定します。-d all: 全てのデバイスをターゲットにします。-d web: Webブラウザをターゲットにします。-d chrome: Chromeブラウザをターゲットにします。-d random: ランダムなデバイスを選択します。
初めてアプリを実行する場合は、Flutterフレームワークをダウンロードしてビルドする必要があるため、数分かかる場合があります。
アプリが正常にビルドされたら、下記のようなカウンターアプリが表示されます。
画面には、ボタンとカウンターの値が表示されています。ボタンをタップするたびに、カウンターの値が1ずつ増加します。
おわりに
このチュートリアルでは、Flutterを使ってチュートリアルのカウンターアプリを実行する手順を紹介しました。Flutterは、アプリ開発をより簡単かつ迅速に行うための優れたツールです。Flutterを使用することで、1つのコードベースでさまざまなプラットフォームをターゲットにしたアプリを開発することができます。初めてFlutterを使用する方でも、このチュートリアルを参考にして、簡単なアプリを作成することができます。