Flutter入門：Codelabで簡単なアプリ開発ガイド

Flutter入門者向けCodelabガイドの概要

Flutterは、モバイル・ウェブ・デスクトップアプリを1つのコードで開発できるUIツールキットとして注目を集めています。日本語環境でも充実したリソースが整っており、特にGoogle Codelabsでは「響きの良いランダムな名前生成アプリ」を作成するチュートリアルが公開されています。このガイドでは、Codelabを通じてFlutterの基本を習得し、日本語環境での開発体験をスムーズに始められるよう、ステップバイステップで解説します。

Codelab環境構築の手順

Flutter開発にはAndroid StudioやVS CodeなどのIDEが適しています。以下では、Windows/macOS/Linuxそれぞれで動作確認済みの設定手順を紹介します。

Android Studioでのセットアップ

1. Flutterプラグインの導入
2. Android Studioを開き、「Preferences」（macOS）または「Settings」（Windows/Linux）→ 「Plugins」にアクセス。
3. 検索欄に「Flutter」を入力し、公式プラグインをインストールします。
4. Flutter SDKのインストール
5. Flutter公式サイトからSDKをダウンロードし、「Add to PATH」オプションを選択します。
6. プロジェクト作成確認
7. Android Studioで「New Flutter Project」を選択し、テンプレート選択画面が表示されることでセットアップ完了です。

VS Codeでのセットアップ

1. Flutter拡張機能の導入
2. VS Codeの拡張機能市場から「Flutter」および「Dart」をインストールします。
3. SDKのパス設定
4. 「File」→「Preferences」→「Settings」→「Flutter」タブで、Flutter SDKのパスを指定します。
5. プロジェクト作成確認
6. VS Code内からコマンドパレット（Ctrl+Shift+P）を開き、「Flutter: New Project」を選択し、テンプレート選択画面が表示されることを確認します。

Flutterプロジェクトの初期化と基本構造

Flutterアプリケーションはflutter createコマンドで簡単に作成できます。以下は手順と生成されるファイル構造の概要です。

1. プロジェクト作成コマンド
   bash
flutter create my_first_app

2. プロジェクト名を指定し、必要な依存関係が自動でインストールされます。

3. 基本的なディレクトリ構造
   | ファイル/フォルダ | 説明 |
   |------------------|------|
   | lib/main.dart | アプリのエントリーポイント。UIを構築するコードが記述されます。 |
   | pubspec.yaml | パッケージ依存関係やアプリ設定を管理するファイルです。 |
   | android/ | Android用のネイティブコードが配置されています（変更は推奨されません）。 |

4. main.dartのコード構成
   dart
void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(title: Text('初アプリ')),
body: Center(child: Text('Hello, Flutter!')),
),
);
}
}


• runAppでアプリを起動し、MaterialAppがUIの基盤を提供します。

StatelessWidgetとStatefulWidgetの使い分け

Flutterでは、UIの状態によってStatelessWidgetとStatefulWidgetを使い分ける必要があります。それぞれの特徴を比較すると以下の通りです。

具体的な使い分けのコツ

• StatelessWidgetは、デザインや静的データを扱う際によく使われます。
• StatefulWidgetが必要なのは、ユーザー操作（ボタンクリック）やリアルタイム情報更新などの状態変化がある場合です。

コード例で使い分けの理解を深める

StatelessWidgetの例: 固定テキスト表示

StatefulWidgetの例: カウンター機能

Material Designコンポーネントの実装例

FlutterにはMaterial Designに沿ったUI部品が豊富に用意されています。以下では、日本語対応アプリ開発に役立つ主要なコンポーネントを紹介します。

ボタン・テキストフィールドの使い方

• ElevatedButton（浮き出たボタン）とTextFormField（入力フィールド）を組み合わせて、フォームUIを作成できます。

ナビゲーションバーの実装

• BottomNavigationBarを用いたタブ切り替えは、アプリ構成に最適です。

注意点：日本語表示を確実にするには、MaterialAppのlocalizationsDelegatesにGlobalMaterialLocalizations.delegateを追加してください。
詳細な手順:
1. pubspec.yamlに依存関係を追加:
yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
2. MaterialAppに以下を設定:
dart
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [Locale('ja', 'JP')],

Codelabでのデバッグとエラーハンドリング

Flutter開発では「DevTools」という公式ツールを活用することで、効率的なデバッグが可能です。以下の手順で確認しましょう。

Flutter DevToolsの基本操作

1. 起動方法
   bash
flutter devtools

2. flutter run -d chrome --devtools-serve-devtoolsは非推奨です（2023年以降のバージョンで削除予定）。最新版では直接flutter devtoolsコマンドを使用します。

3. 画面表示

4. ブラウザで「http://localhost:9100」にアクセスし、UIのデバッグやパフォーマンス分析ができます。

よくあるエラーの解決策

エラー読み方のコツ：コンソールメッセージには「パッケージ名:行数」が記載されているため、該当するファイルを直接開けて修正できます。

まとめ

• DevToolsの起動は最新版ではflutter devtoolsコマンドを使用すること。
• 日本語対応にはlocalizationsDelegatesとsupportedLocalesを正しく設定し、依存関係も追加する必要がある。
• StatelessWidgetとStatefulWidgetは用途に応じて使い分け、具体例を通じて理解を深めることが重要である。