目次
はじめに
Flutterに興味があるけれど、環境構築が不安なあなたへ!
この記事では、必要なツールのインストールから初期設定、アプリの実行までを丁寧に解説します。
環境情報
MacOS: Sonoma14.4.1
CPU: Apple Silicon
VScode: 1.89.1
Flutterについて
FlutterはGoogleが提供するオープンソースのフレームワークで、単一のコードベースでiOSとAndroid向けの美しいネイティブアプリを開発できます。
高速なパフォーマンスと豊富なウィジェットにより、開発者に柔軟性と効率を提供します。
多くの企業や開発者が採用しており、人気が急速に高まっています。
Flutterの開発には、Dartという言語を使用します。
環境構築
以下のFlutterのサイトを開きます。
Flutter Install MacOS
最初に、公式サイトからFlutterをダウンロードします。今回はiOSを選択します。
Start building Flutter iOS apps on macOSという画面が開きます。
以下の注意点をお読みください。
Appleシリコン搭載のMacでの注意点
Appleシリコン(M1やM2などのチップ)を搭載したMacでFlutterを使用する場合、一部のコンポーネントの動作にはRosetta 2という翻訳レイヤーが必要です。これは、Intel用に開発されたソフトウェアをAppleシリコン上で実行可能にするためのエミュレーション技術です。
Rosetta 2をインストールします
sudo softwareupdate --install-rosetta --agree-to-license
Rosetta 2をインストールしたら次に進みます。
今回は環境構築を省力化するためにVScode とVScodeのFlutterのプラグインを使用します。
- VScode
-
Flutterプラグイン
(FlutterプラグインはVS Codeのプラグインインストール画面で「Flutter」と検索してインストールするのが簡単です)
次に、Flutterをインストールしていきます。VScodeを開きます。
Command + Shift + Pを押し、コマンドパレットを開きます。
「Flutter: New Project」を選択します。
Flutterのテンプレートを選択する画面が表示されますので、「Application」を選択します。
プロジェクトフォルダーのルートディレクトリを選択し、プロジェクト名を入力します。
サンプルアプリの実行
作成したアプリを動かしてみます。iOSアプリをエミューレーター上で起動します。
Command + Shift + Pを押し、コマンドパレットを開きます。
「Flutter: Select Device」を選択します。
VScodeの「実行とデバッグ」を実行します。しばらく待つと下記のウインドウが開きます。
カウンターアプリが起動します。右下の+ボタンを押すと、画面中央の数字がカウントされていきます。
以上でアプリの実行は完了です。
開発Tips
ホットリロード
Flutterは、ホットリロード(アプリを再起動したり状態を失ったりすることなく、ライブ実行中のアプリのコードをリロードする機能)による高速な開発サイクルを提供します。
アプリのソースコードを変更し、VS Codeでホットリロードコマンドを実行して、ターゲットデバイスでの変更を確認できます。
その他
Flutter Doctorの実行
Flutterの環境を正しく構築できたか確認するために、「Flutter Doctor」を実行します。Flutter Doctorは、環境構築に必要なツールや設定が正しくインストールされているかチェックしてくれます。
ターミナルを開き、以下のコマンドを実行します。
flutter doctor
コマンドの実行結果を確認します。必要なツールや設定が欠けている場合、Flutter Doctorがそれを指摘し、修正方法を提案してくれます。
よくあるエラーとその解決方法
Xcode installation is incomplete
- エラー内容:Xcodeがインストールされていない、または設定が完了していない。
- 解決策:App StoreからXcodeをインストールし、インストール後にXcodeを一度起動して設定を完了させます。その後、再度ターミナルで以下のコマンドを実行します。
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
Unable to locate Android SDK.
- エラー内容:Android SDKがインストールされていない。
- 解決策:Android Studioをインストールし、SDK Managerから必要なSDKツールをインストールします。その後、Flutter Doctorを再度実行して確認します。
CocoaPods not installed.
- エラー内容:CocoaPodsがインストールされていない。
- 解決策:CocoaPodsをインストールします。以下のコマンドをターミナルで実行します。
brew install ruby
sudo gem install cocoapods
インストールが完了したら、以下のコマンドを実行しCocoaPodsのセットアップを完了します。
pod setup
Unable to get list of installed Simulator runtimes.
- エラー内容:Xcodeがインストールされているシミュレータランタイムの一覧を取得できない。
- 解決策:
1.Xcodeを最新バージョンにアップデートします。
2.Xcodeを開き、Settings > Platformsを選択し、iOS xx.xをインストールします。
3.以下のコマンド実行し、Xcodeを再設定しますsudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch
Device not detected.
- エラー内容:接続されたデバイスが認識されない。
- 解決策:デバイスのUSBデバッグモードが有効になっているか確認します。iOSデバイスの場合は、信頼済みのデバイスとして設定されているか確認します。また、デバイスの接続を再確認し、再度Flutter Doctorを実行します。
動画チュートリアル
以下のYouTube動画では、Flutterの環境構築手順を実際に見ながら進めることができます。
サンプルコード
以下は基本的なTODOアプリのサンプルコードです。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TodoList(),
);
}
}
class TodoList extends StatefulWidget {
@override
_TodoListState createState() => _TodoListState();
}
class _TodoListState extends State<TodoList> {
final List<String> _todoItems = [];
void _addTodoItem(String task) {
setState(() {
_todoItems.add(task);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TODOリスト'),
),
body: ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text(_todoItems[index]),
);
},
itemCount: _todoItems.length,
),
floatingActionButton: FloatingActionButton(
onPressed: () => _displayAddTodoDialog(context),
tooltip: '追加',
child: Icon(Icons.add),
),
);
}
void _displayAddTodoDialog(BuildContext context) async {
String newTask = '';
await showDialog<String>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('新規'),
content: TextField(
onChanged: (String value) {
newTask = value;
},
),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('取り消し'),
),
TextButton(
onPressed: () {
if (newTask.isNotEmpty) {
_addTodoItem(newTask);
}
Navigator.pop(context);
},
child: Text('追加'),
),
],
);
},
);
}
}
まとめ
この記事では、Flutterの環境構築手順について初心者向けに解説しました。以下は主要なポイントです。
- Flutterの概要: FlutterはGoogleが提供するオープンソースのフレームワークで、単一のコードベースでiOSとAndroid向けのネイティブアプリを開発できる。
- 環境構築の手順: MacでのFlutter環境構築のステップを詳しく説明し、必要なツールのインストール方法を解説。
- Appleシリコン搭載のMacでの注意点: Appleシリコンを搭載したMacでFlutterを使う際には、Rosetta 2のインストールが必要。
- サンプルアプリの実行: 簡単なカウンターアプリを作成し、実際に動かす手順を紹介。
- 開発Tips: ホットリロード機能を活用して、効率的な開発サイクルを実現する方法を紹介。
- Flutter Doctorの実行: 環境構築後にFlutter Doctorを実行し、必要なツールや設定が正しくインストールされているかを確認。
- よくあるエラーとその解決方法: 環境構築時によくあるエラーとその解決方法を紹介。
次のステップ
Flutterの環境構築が完了したら、ぜひ様々なアプリ開発に挑戦してみてください。Flutterの公式ドキュメントやコミュニティフォーラムも活用しながら、より高度な機能やテクニックを学んでいきましょう。
この記事が役に立ったと思ったら、いいねやストックをお願いします!!