Zenn
🐇

Flutter Webを使ったウェブアプリ開発の始め方

2024/06/20に公開
Flutter
Android Studio
Dart
プログラミング
tech

こんにちは、kobalabです！

今回は、Flutter Webを使ったウェブアプリ開発の始め方について解説します。FlutterはクロスプラットフォームのUIフレームワークで、モバイルアプリやデスクトップアプリに加えて、Webアプリケーションの開発にも対応しています。この記事では、Flutterの概要とメリット、開発環境の構築手順、初めてのFlutter Webアプリの作成と起動、そして開発環境のトラブルシューティングについて紹介します。

Flutterの概要とメリット

Flutterとは？

Flutterは、Googleが開発したオープンソースのUIフレームワークです。Dartというプログラミング言語を使用し、一つのコードベースでiOS、Android、Web、そしてデスクトップアプリケーションを開発することができます。
※今回私が取り組むプロジェクトは、Webアプリを対象としているので、iOSやAndroid向けのモバイルアプリはリリースしない予定です。

Flutterのメリット

  1. クロスプラットフォーム開発

    • 一つのコードベースで複数のプラットフォームに対応できるため、複数プラットフォームにアプリをリリースする場合は開発効率が大幅に向上します。

  2. 豊富なウィジェット

    • Flutterには多くの組み込みウィジェットが用意されており、美しく一貫性のあるUIを簡単に構築できます。

  3. 高速なパフォーマンス

    • ネイティブの描画エンジンを使用しているため、スムーズで高速なパフォーマンスを実現します。

  4. ホットリロード

    • コードを変更してもアプリを再起動せずに即座に反映されるため、迅速な開発が可能です。

開発環境の構築手順

必要なツールのインストール

  1. Flutter SDKのインストール

    • Flutterの公式サイト（https://flutter.dev）から最新のFlutter SDKをダウンロードしてインストールします。

  2. Dart SDKのインストール

    • Flutter SDKにはDart SDKが含まれていますので、別途インストールする必要はありません。

  3. コードエディタの準備

    • お好みのコードエディタを使用します。Visual Studio Code（VS Code）やIntelliJ IDEAがおすすめです。Flutterのプラグインをインストールして開発をサポートします。私はAndroid Studioを利用しています。

  4. Chromeブラウザのインストール

    • Flutter WebアプリケーションのテストにはChromeブラウザを使用します。既にインストールされている場合は、最新バージョンに更新しておきます。

開発環境のセットアップ

  1. Flutterの設定

    • ターミナル（コマンドプロンプト）を開き、Flutterのインストールを確認します：
      flutter --version
    • このようにバージョン情報が表示されます：
      Flutter 3.22.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 761747bfc5 (2 weeks ago) • 2024-06-05 22:15:13 +0200
Engine • revision edd8546116
Tools • Dart 3.4.3 • DevTools 2.34.3

  2. Flutter Webサポートの有効化

    • Flutter Webのサポートを有効にするために、以下のコマンドを実行します：
      flutter config --enable-web
    • うまくいくとこのように表示されますので、コードエディタを再起動しましょう。
      Setting "enable-web" value to "true".

You may need to restart any open editors for them to read new settings.

  3. 必要な依存関係のインストール

    • Flutterの依存関係をインストールします：
      flutter doctor
    • flutter doctor コマンドは、Flutterのインストール状況を確認し、不足しているツールや設定を教えてくれます。
      Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.2, on macOS 14.2.1 23C71 darwin-arm64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
   ✗ Android license status unknown.
     Run `flutter doctor --android-licenses` to accept the SDK licenses.
     See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[!] Xcode - develop for iOS and macOS (Xcode 15.4)
   ✗ Unable to get list of installed Simulator runtimes.
   ! CocoaPods 1.11.3 out of date (1.13.0 is recommended).
     CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
     Without CocoaPods, plugins will not work on iOS or macOS.
     For more info, see https://flutter.dev/platform-plugins
   To upgrade see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.77.3)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 2 categories.
      Android toolchainとXcodeが不足していると言われましたが、Webアプリ開発するだけであれば特に問題なく進められます。

初めてのFlutter Webアプリの作成と起動

新しいプロジェクトの作成

  1. プロジェクトの作成
    • 新しいFlutterプロジェクトを作成します：
      flutter create my_web_app
    • プロジェクトのディレクトリに移動します：
      cd my_web_app

アプリの起動

  1. アプリのビルドと起動

    • アプリケーションをChromeブラウザで実行します：
      flutter run -d chrome

  2. コードの編集

    • lib/main.dart ファイルを開き、コードを編集します。例えば、以下のように変更してみます：
      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 Web!'),
        ),
        body: Center(
          child: Text('Welcome to Flutter Web'),
        ),
      ),
    );
  }
}

開発環境のトラブルシューティング

よくある問題と対処法

  1. Flutterコマンドが見つからない

    • パスが正しく設定されているか確認してください。flutter/bin ディレクトリがシステムのパスに含まれている必要があります。

  2. ブラウザが起動しない

    • Chromeブラウザが正しくインストールされているか、最新バージョンに更新されているか確認してください。また、他のブラウザで試してみることも有効です。

  3. 依存関係のエラー

    • flutter doctor コマンドを実行して、エラーや不足している依存関係を確認し、必要なものをインストールします。

まとめ

この記事では、Flutter Webを使ったウェブアプリ開発の始め方について紹介しました。Flutterの概要とメリット、開発環境の構築手順、初めてのFlutter Webアプリの作成と起動、そして開発環境のトラブルシューティングについて学びました。Flutter Webを使って、魅力的なウェブアプリケーションを開発してみてください。

質問やフィードバックがありましたら、コメント欄でお知らせください。それでは、次回の記事をお楽しみに！

Discussion