【Flutter】Flutter開発でよく使われるパッケージを紹介します

2024年5月8日2024年5月10日

URLをコピーしました！

Aさん

Flutterのパッケージってなにがあるのかよくわからないなぁ。

この記事では、「Flutterでの開発を効率化するためにパッケージを利用したいけれど、どんなものがよく使われているのかが知りたい。」という方に向けて、Flutter開発でよく使われるパッケージを4つ紹介したいと思います。

Flutterのパッケージは、pub.devからインストールする事が可能です。

Dart packages

The official repository for Dart and Flutter packages. Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.

Flutter開発でよく使われるパッケージ4選

webview_flutter

「 Flutter開発でよく使われるパッケージ」一つ目は、webview_flutterです。

以下が、webview_flutterの主な機能です。

ウェブページの表示: アプリ内で直接ウェブページを表示し、ナビゲーションを行う。
JavaScriptの実行: ウェブビュー内でJavaScriptを実行し、その結果をFlutterアプリで利用する。
カスタム化: 背景色の設定やウェブコンテンツとのインタラクション。
通信: ウェブビューとFlutterアプリ間でデータを交換し、相互作用する。

webview_flutterはFlutterプラグインで、AndroidとiOSにWebViewウィジェットを提供します。

このパッケージはFlutterアプリケーション内でウェブページを表示する機能を実現し、JavaScriptの実行設定や背景色のカスタマイズなどが可能です。

プラットフォーム固有の機能にアクセスするための追加の実装パッケージも提供されています。

webview_flutterを使用した実装例を挙げます：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WebView Demo'),
        ),
        body: WebView(
          initialUrl: 'https://example.com',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

このサンプルコードは、FlutterアプリにWebViewウィジェットを組み込み、https://example.com というURLを初期ページとして表示します。

また、javascriptMode を unrestricted に設定することで、ページ内のJavaScriptが制限なく実行されます。

このように webview_flutter を使うことで、簡単にウェブページの表示やインタラクションがアプリ内で実現できます。

go_router

「 Flutter開発でよく使われるパッケージ」二つ目は、go_routerです。

以下が、webview_flutterの主な機能です。

パスとクエリパラメータの解析: URLのテンプレート構文を使用してパラメータを解析します（例: “user/:id”）。
サブルートの表示: 複数の画面を一つの行先に表示することが可能です。
リダイレクションサポート: ユーザーの認証状況に基づいて異なるURLにリダイレクトするなど、アプリケーションの状態に基づいてユーザーを異なるURLへと導くことができます。
複数のナビゲーターのサポート: マッチしたルートに基づいて独自のページを表示する内部ナビゲーターを使用することができます。例えば、画面下部に常に表示されるBottomNavigationBarなどがこれに該当します。
MaterialとCupertinoのアプリケーションの両方に対応: FlutterのMaterialデザインとiOSスタイルのCupertinoデザインの両方をサポートします。
既存のNavigator APIとの後方互換性: 既存のナビゲーションAPIとも互換性があります。

go_routerは、ディープリンキングやデータ駆動型のルート設定をサポートし、フラットなURLルートから複雑なナビゲーション構造まで、幅広い用途に対応できる柔軟性を提供します。

http

「 Flutter開発でよく使われるパッケージ」一つ目は、httpです。

以下が、httpの主な機能です。

HTTPリクエストの送信: httpパッケージを使用して、簡単にWeb APIからデータを取得（GET）やデータを送信（POST）することができます。
データの変換: HTTPレスポンスをDartのオブジェクトに変換し、アプリケーション内で扱いやすくする。
エラーハンドリング: リクエストが失敗した場合やサーバーからの応答が期待と異なる場合に適切に対処する。

例えば、http.getを使って特定のURLからデータを取得し、そのレスポンスをJSONとして解析してDartオブジェクトに変換する一連のプロセスを実装できます。

また、http.postメソッドを使用してデータをサーバーに送信し、レスポンスを受け取ることも可能です。

データを取得する基本的なコードは以下のようになります：

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

Future<void> fetchData() async {
  var url = Uri.parse('https://example.com/data');
  var response = await http.get(url);

  if (response.statusCode == 200) {
    // レスポンスを処理する
    print('Data fetched successfully');
  } else {
    // エラー処理
    throw Exception('Failed to load data');
  }
}

このパッケージは、アプリケーションにおいて外部のデータソースと通信する際の機能を簡単に追加することができるため、多くのFlutter開発者にとって有用です。