Flutter を使用してクロスプラットフォームのフロントエンドアプリケーションを開発する

モバイルデバイスやオペレーティングシステムの多様化に伴い、クロスプラットフォームのフロントエンドアプリケーションの開発はフロントエンド開発における重要なテーマとなっています。Flutter は、クロスプラットフォームのモバイルアプリケーション開発フレームワークとして、iOS、Android、Web などのプラットフォームを同時にサポートできるため、開発コストが大幅に削減され、開発効率が向上します。このブログでは、環境構築、基本的な使用法、UI 設計、状態管理、ネットワークリクエストなどの主要な内容を含め、Flutter を使用してクロスプラットフォームフロントエンドアプリケーションを開発する方法を段階的に理解していきます。

2. 環境構築

Flutter で開発を始める前に、開発環境をセットアップする必要があります。

2.1 Flutter SDKのインストール

まず、Flutter SDK をインストールする必要があります。Flutter は、クロスプラットフォームのフロントエンドアプリケーションの開発に役立つ豊富なツールとライブラリを提供します。

Flutter 公式 Web サイト ( https://flutter.dev/) にアクセスして、オペレーティングシステムに対応するFlutter SDK をダウンロードします。
ダウンロードした SDK を解凍し、システムの PATH 環境変数に追加します。

2.2 IDEのインストール

Flutter は、Android Studio、Visual Studio Code などの複数の統合開発環境 (IDE) をサポートしています。使い慣れている、または開発に興味のある IDE を選択してください。

Android Studio: Android Studio を開き、Flutter プラグインをインストールし、Flutter プロジェクトを作成します。
Visual Studio Code: VS Code を開き、Flutter プラグインをインストールし、VS Code の拡張機能を使用して Flutter プロジェクトを作成します。

2.3 環境を確認する

次のコマンドを実行して、Flutter 環境が正常に構築されたかどうかを確認します。

flutter doctor

すべてがうまくいけば、次のような出力が表示されるはずです。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale en-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.5.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] VS Code (version 1.58.0)
[✓] Connected device (3 available)

• No issues found!

3. 最初の Flutter アプリを作成する

開発環境をセットアップしたら、最初の Flutter アプリケーションの作成を開始できます。

3.1 コマンドラインを使用して Flutter プロジェクトを作成する

次のコマンドを実行して、次hello_flutterの名前の Flutter プロジェクトを作成します。

flutter create hello_flutter

これにより、現在のディレクトリにという名前のhello_flutterFlutter プロジェクトが作成されます。

3.2 Flutterアプリケーションの実行

Flutter プロジェクトを作成したら、エミュレータまたは実際のデバイスでアプリケーションを実行できます。

Android Studio の使用: Android Studio を開き、を選択し、プロジェクトディレクトリOpen an existing Android Studio projectを選択して、をクリックします。次に、エミュレータを選択するか実機に接続し、「実行」ボタンをクリックします。hello_flutterOK
VS Code の使用: VS Code を開き、hello_flutterプロジェクトディレクトリを開き、F5[実行] ボタンを押すかタップします。エミュレータを選択するか、実際のデバイスに接続し、「実行」ボタンをクリックします。

すべてがうまくいけば、エミュレータまたは実際のデバイス上でシンプルな Flutter アプリが実行されているのが表示されるはずです。

4. Flutterの基礎知識

クロスプラットフォームのフロントエンドアプリケーションの開発を始める前に、Flutter の基本的な知識を理解する必要があります。

4.1 ウィジェット

Flutter では、すべてがウィジェットです。ウィジェットは Flutter アプリケーションの構成要素であり、ユーザーインターフェイスの構築に使用されます。Flutter は、テキスト、ボタン、画像などのさまざまな UI 要素を構築するための多数のウィジェットを提供します。

import 'package:flutter/material.dart';

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

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

MyApp上記のコードでは、とを呼び出して使用する Flutter アプリケーションを作成しMaterialApp、Scaffoldアプリケーションの基本構造を構築しました。AppBar子コンポーネントを中央に配置するアプリバーを作成するために使用されますCenter。

4.2 ステートフルウィジェットとステートレスウィジェット

Flutter では、ウィジェットはステートフルウィジェットとステートレスウィジェットの 2 種類に分類されます。

ステートレスウィジェット: 一度決定されるとプロパティを変更できない不変のウィジェットです。たとえばText、Iconなど。
ステートフルウィジェット: アプリケーションの状態に応じてプロパティが変化する変数ウィジェットです。たとえばListView、TextFieldなど。

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Count: $_count'),
              ElevatedButton(
                onPressed: _increment,
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

上記のコードでは、CounterAppカウンターを表示するために Stateful Widget という名前のステートフルウィジェットを作成しました。ボタンをクリックしてカウンターの値を増やします。

4.3 ルーティングとナビゲーション

Flutter では、ルーティングとナビゲーションを使用してページ間を移動し、データを渡します。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

上記のコードでは、HomePageとの2 つのページを作成しましたSecondPage。HomePageボタンをクリックするとSecondPageそのページにジャンプします。SecondPageページ内でボタンをクリックすると、前のページに戻ります。

4.4 ネットワークリクエスト

実際の開発では、通常、データを取得して送信するためにバックエンドサーバーと対話する必要があります。Flutter は、httpHTTP リクエストを送信するためのライブラリを提供します。

import 'package:http/http.dart' as http;

Future<void> fetchData() async {
  final response = await http.get('https://api.example.com/data');
  if (response.statusCode == 200) {
    print('Data: ${response.body}');
  } else {
    print('Failed to load data');
  }
}

上記のコードでは、を使用してMethodChannelプラットフォームチャネルを作成し、通信識別子を指定します。Flutter では、invokeMethodメソッドを通じてネイティブコード内のメソッドを呼び出し、パラメーターを渡すことができます。ネイティブコードでは、Flutter がネイティブコードと対話するときに、対応するメソッドを登録し、対応するロジックを実行する必要があります。

7.2 ネイティブコードでのメソッドの実装

ネイティブコードでは、プラットフォームチャネルで定義されたメソッドを実装するために、対応するプラットフォーム開発言語を使用する必要があります。

Android プラットフォーム (Java/Kotlin):

package com.example.channel_example;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodChannel;

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "com.example.channel";

    @Override
    public void configureFlutterEngine(FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
                .setMethodCallHandler((call, result) -> {
                    if (call.method.equals("nativeMethod")) {
                        String message = "Hello from Native";
                        result.success(message);
                    } else {
                        result.notImplemented();
                    }
                });
    }
}

FlutterMethodChannel上記のコードでは、 with という名前のメソッドを登録しnativeMethod、Flutter によって呼び出されたときに単純なメッセージを返します。

8. パッケージ化と展開

Flutter アプリケーションの開発が完了したら、アプリケーションをパッケージ化してさまざまなプラットフォームにデプロイできます。

8.1 梱包

Flutter では、次のコマンドを使用してアプリケーションをパッケージ化できます。

flutter build apk # 打包Android应用
flutter build ios # 打包iOS应用
flutter build web # 打包Web应用

8.2 展開

パッケージ化が完了したら、生成されたアプリケーションファイルをアプリケーションストアまたは Web サーバーにアップロードし、ユーザーがダウンロードして使用できるようにします。

Android アプリの場合、生成された APK ファイルを Google Play ストアにアップロードできます。
iOS アプリの場合、生成された IPA ファイルを Apple App Store にアップロードできます。
Web アプリケーションの場合、生成されたビルドファイルを Web サーバーにアップロードできます。

9. まとめ

このブログの実践的なデモンストレーションを通じて、環境構築、基本的な使用法、UI 設計、状態管理、ネットワークリクエスト、Flutter とネイティブコード間の対話などのコアコンテンツを含む、Flutter を使用してクロスプラットフォームフロントエンドアプリケーションを開発する方法を学びました。、パッケージ化と展開。

Flutter は、クロスプラットフォームのモバイルアプリケーション開発フレームワークとして、豊富な機能と強力なパフォーマンスを備えており、大規模なフロントエンドアプリケーションを開発する際に大きな価値を発揮します。このブログが Flutter 開発のインスピレーションになれば幸いです。読んでいただきありがとうございます。