Flutter開発をより効率的にする

ライブラリを使用できるのに、なぜカスタム機能を作成する必要があるのでしょうか? ライブラリは開発者の親友であり、命の恩人です。私の意見では、優れたプロジェクトには、利用可能な最高のライブラリを活用する必要があります。

Flutter の素晴らしいライブラリに関するシリーズの一部であるこの記事では、開発プロセスを進めるのに役立つ 7 つの Flutter ライブラリをまとめました。

1.冷凍

序章

Freezed は、不変のデータクラスと共用体タイプを迅速に生成するのに役立つ Dart ベースの Flutter ライブラリです。Flutter 開発では、データと状態を表すデータクラスと共用体型を定義する必要があることがよくあります。Freezed を使用すると、これらのクラスと型を簡単に定義でき、それらはすべて不変であるため、アプリケーションのパフォーマンスと保守性の向上に役立ちます。

使用するシーン

フリーズは次のシナリオで使用できます。

不変のデータクラスと共用体型を定義します。
状態マネージャーでのデータクラス定義を簡素化します。
コードの可読性と保守性が向上します。

例

Freezed ライブラリを使用するには、プロジェクトに依存関係を追加する必要があります。次のコードを pubspec.yaml ファイルに追加できます。

dependencies:
  freezed: ^1.2.0

次に、定義するデータクラスと共用体タイプを含む Dart ファイルを作成する必要があります。このファイルでは、frozen_annotation パッケージをインポートし、@freezed および @JsonSerializable アノテーションを使用してクラスを定義する必要があります。

import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:flutter/foundation.dart';
import 'package:json_annotation/json_annotation.dart';

part 'my_class.freezed.dart';
part 'my_class.g.dart';

@freezed
abstract class MyClass with _$MyClass {
  const factory MyClass({
    @required String name,
    @required int age,
  }) = _MyClass;

  factory MyClass.fromJson(Map<String, dynamic> json) =>
      _$MyClassFromJson(json);
}

上記のコードでは、MyClass というデータクラスを定義しました。これには、名前と年齢という 2 つの必須属性があります。また、_MyClass というプライベートクラスも定義します。これは、MyClass クラスの実装クラスであり、不変クラスの生成に使用されます。

実装クラスと JSON シリアル化および逆シリアル化コードを生成するには、次のコマンドを実行します。

flutter pub run build_runner build --delete-conflicting-outputs

これにより、生成されたコードを含む my_class.freezed.dart という名前のファイルが生成されます。

これで、アプリケーションで MyClass クラスを使用できるようになりました。例:

final myClass = MyClass(name: 'John', age: 30);

https://pub.dev/packages/freezed

2.flutter_native_splash

序章

flutter_native_splash は、アプリの起動時にネイティブスプラッシュスクリーンを追加するのに役立つ Flutter ライブラリです。flutter_native_splash を使用すると、ネイティブコードを手動で編集することなく、Android および iOS プラットフォーム用のスプラッシュスクリーンを簡単に作成できます。

使用するシーン

flutter_native_splash は次のシナリオに適しています。

ネイティブのスプラッシュ画面をアプリケーションに追加したい。
ネイティブコードを手動で編集したくない。

例

flutter_native_splash ライブラリを使用するには、プロジェクトに依存関係を追加する必要があります。次のコードを pubspec.yaml ファイルに追加できます。

dependencies:
  flutter_native_splash: ^1.2.0

次に、アプリケーションのスプラッシュスクリーンイメージを作成する必要があります。この画像をアプリケーションのルートディレクトリに配置し、splash.png という名前を付けることができます。次に、次のコードを pubspec.yaml ファイルに追加して、アプリケーションのスプラッシュスクリーンイメージを指定できます。

flutter_native_splash:
  image: splash.png

次に、次のコードを main.dart ファイルに追加して、flutter_native_splash ライブラリを有効にする必要があります。

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  // Set the initial route when starting the app
  var initialRoute = '/';

  // Run the app
  runApp(MyApp(initialRoute: initialRoute));

  // Show splash screen before loading the app
  FlutterNativeSplash.show(
    seconds: 5,
    // Put any other FlutterNativeSplash configurations here...
  );
}

上記のコードでは、最初に初期ルートを定義してから、アプリケーションを開始します。次に、FlutterNativeSplash.show() メソッドを呼び出します。これにより、ネイティブスプラッシュ画面が表示され、アプリの読み込みが一定時間 (この場合は 5 秒) 遅延されます。

アプリを起動すると、ネイティブのスプラッシュ画面が表示されます。

https://pub.dev/packages/flutter_native_splash

3. go_router

序章

go_router は、アプリケーション内のルーティングを簡単に管理するのに役立つ Flutter ライブラリです。go_router を使用すると、複数のルートを持つアプリケーションを簡単に作成し、それらのルート間のナビゲーションを管理できます。go_router は、複数のナビゲーションスタックや、ルーティングパラメーターやコールバックなどの関数もサポートします。

使用するシーン

go_router は次のシナリオに適しています。

複数のルートを持つアプリケーションを管理したい。
ルート間のナビゲーションを管理したい。
ルーティングパラメータやコールバックなどの機能をサポートする必要があります。

例

go_router ライブラリを使用するには、プロジェクトに依存関係を追加する必要があります。次のコードを pubspec.yaml ファイルに追加できます。

dependencies:
  go_router: ^2.2.0

以下は完全なサンプルコードです。これには、GoRouter インスタンスの作成と 2 つのルートの定義の例が含まれています。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      routerDelegate: GoRouter(
        // Define your routes here
        routes: [
          GoRoute(
            path: '/',
            pageBuilder: (context, state) => HomePage(),
          ),
          GoRoute(
            path: '/detail',
            pageBuilder: (context, state) {
              final args = state.extra['args'] as Map<String, dynamic>;
              return DetailPage(
                title: args['title'],
                subtitle: args['subtitle'],
              );
            },
          ),
        ],
      ),
      routeInformationParser: GoRouterInformationParser(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            GoRouter.of(context).go('/detail', {
              'title': 'Detail Page',
              'subtitle': 'This is the detail page.',
            });
          },
          child: Text('Go to Detail Page'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  final String title;
  final String subtitle;

  const DetailPage({
    Key key,
    @required this.title,
    @required this.subtitle,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Text(subtitle),
      ),
    );
  }
}

go_router は、アプリケーション内のルーティングを簡単に管理するのに役立つ優れた Flutter ライブラリです。go_router を使用すると、複数のルートを持つアプリケーションを簡単に作成し、それらのルート間のナビゲーションを管理できます。複数のルートを持つ Flutter アプリケーションを開発している場合、go_router は不可欠なヘルパーになります。

https://pub.dev/packages/go_router

4. just_audio

序章

just_audio は、Flutter アプリケーションにオーディオ再生機能を提供する Flutter プラグインです。プラットフォームのネイティブプレーヤーを使用し、カスタム通知、カスタムプレーヤー UI、オーディオストリーミングなどの高度な機能を提供します。

使用するシーン

just_audio は、Flutter アプリでオーディオを再生する必要がある場合に使用します。音楽、ポッドキャスト、ボイスメモ、その他の種類のオーディオを再生したい場合でも、just_audio が対応します。

just_audio はプラットフォームのネイティブプレーヤーに基づいて実装されているため、より優れたパフォーマンスと優れたユーザーエクスペリエンスを提供できます。

例

以下は、just_audio を使用してローカルオーディオファイルを再生する簡単な例です。まず、just_audio 依存関係を pubspec.yaml ファイルに追加する必要があります。

dependencies:
  flutter:
    sdk: flutter
  just_audio: ^0.9.19

次に、Flutter アプリで AudioPlayer クラスを使用してオーディオを再生する必要があります。ここでは、AudioPlayer クラスを使用してローカルオーディオファイルを再生する簡単な例を示します。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Just Audio Demo',
      home: AudioPlayerScreen(),
    );
  }
}

class AudioPlayerScreen extends StatefulWidget {
  @override
  _AudioPlayerScreenState createState() => _AudioPlayerScreenState();
}

class _AudioPlayerScreenState extends State<AudioPlayerScreen> {
  AudioPlayer _player;

  @override
  void initState() {
    super.initState();
    _player = AudioPlayer();
    _player.setAsset('assets/audio/sample.mp3');
    _player.play();
  }

  @override
  void dispose() {
    _player.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Just Audio Demo')),
      body: Center(
        child: Text('Playing audio...'),
      ),
    );
  }
}

上記のコードは、まず initState メソッドで AudioPlayer インスタンスを作成し、setAsset メソッドを使用してローカルオーディオファイルをロードします。次に、play メソッドを使用してオーディオの再生を開始します。

destroy メソッドでは、AudioPlayer インスタンスによって占有されているリソースを解放するために、dispose メソッドを呼び出す必要があります。

最後に、ビルドメソッドで、Scaffold ウィジェットと Text ウィジェットを使用して、オーディオが再生されていることを示します。

just_audio は、Flutter アプリケーションでオーディオを簡単に再生するのに役立つ強力な Flutter ライブラリです。just_audio を使用すると、ローカルおよびリモートのオーディオファイルを簡単に再生でき、カスタム通知を追加したり、プレーヤー UI をカスタマイズしたりできます。オーディオ再生を必要とする Flutter アプリケーションを開発している場合は、just_audio が最適な選択になります。

https://pub.dev/packages/just_audio

5. json_serializable

序章

json_serializable は、Dart コードジェネレーターとアノテーションを使用して、JSON シリアル化と逆シリアル化に関連するコードを自動的に生成する Flutter ライブラリです。このライブラリは、Flutter 開発者が JSON データを処理する際に、関連するコードをより効率的かつ便利に生成するのに役立ちます。

使用するシーン:

json_serializable は、Dart で JSON データをシリアル化/逆シリアル化する必要がある場合に非常に便利なツールです。必要な Dart クラス、クラスメンバー、解析関数、その他のコードを自動的に生成できるため、これらのコードを手動で記述する作業負荷が軽減され、コードの可読性と保守性が向上します。

例

ライブラリのインポート: pubspec.yaml ファイルに依存関係を追加します。

dependencies:
  json_annotation: <latest_version>
  json_serializable: <latest_version>

Dart クラスを作成する: Dart クラスを作成し、クラスをシリアル化/逆シリアル化する必要があることを示すコメントをその上に追加します。

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart'; // 这是代码生成器生成的文件

@JsonSerializable() // 告诉 json_serializable 这个类是需要序列化/反序列化的
class User {
  final int id;
  final String name;

  User({
    required this.id,
    required this.name,
  });

  // 自动生成反序列化函数
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);

  // 自动生成序列化函数
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

関連するコードを生成する: ターミナルで次のコマンドを実行して、関連するコードを自動的に生成します。

flutter pub run build_runner build

自動生成されたコードを使用する: 自動生成されたシリアル化/逆シリアル化コードを使用して、Dart オブジェクトを JSON 形式に変換するか、JSON 形式を Dart オブジェクトに変換します。

import 'dart:convert';

void main() {
  // 将 Dart 对象转换成 JSON 格式
  final user = User(id: 1, name: 'John');
  final jsonString = jsonEncode(user.toJson());
  print(jsonString); // 输出：{"id":1,"name":"John"}

  // 将 JSON 格式转换成 Dart 对象
  final jsonMap = jsonDecode(jsonString);
  final newUser = User.fromJson(jsonMap);
  print(newUser.name); // 输出：John
}

json_serializable は、Flutter 開発者が JSON データをより簡単に処理できるようにする非常に便利な Flutter ライブラリです。注釈とコードジェネレーターを通じて、シリアル化/逆シリアル化関連のコードを自動的に生成し、手書きコードの作業負荷を軽減します。

https://pub.dev/packages/json_serializable

6. フレックスカラースキーム

序章

flex_color_scheme は、柔軟で高度にカスタマイズ可能なカラースキームを作成するための Flutter ライブラリです。このライブラリを使用すると、開発者がデザイン要件に応じてカスタマイズするのに便利なアプリケーションのカラーテーマを迅速に作成でき、Flutter マテリアルデザインおよび Cupertino (iOS スタイル) のテーマ仕様もサポートされます。

使用するシーン

flex_color_scheme は主に、アプリケーションのカラースキームをカスタマイズする必要がある Flutter プロジェクトに適しています。主な使用シナリオは次のとおりです。

デザイン要件に合わせて、柔軟で高度にカスタマイズ可能な配色をすばやく作成します。
Flutter マテリアルデザインおよび Cupertino (iOS スタイル) のテーマ仕様をサポートします。
Flutter アプリケーションのマテリアルコンポーネントと簡単に統合できます。
アプリケーションにカスタムのアクセントカラーと明るさを与えることができます。

例

flex_color_scheme を使用してカスタムカラースキームを作成する基本的な手順は次のとおりです。

1. flex_color_scheme ライブラリをプロジェクトに導入します。

dependencies:
  flex_color_scheme: ^2.1.1

2. Flutter アプリケーションで FlexColorScheme を使用して、カスタムカラーテーマを作成します。

import 'package:flex_color_scheme/flex_color_scheme.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlexColorScheme Demo',
      theme: FlexColorScheme.light(scheme: FlexScheme.mandyRed),
      darkTheme: FlexColorScheme.dark(scheme: FlexScheme.mandyRed).toTheme,
      home: MyHomePage(),
    );
  }
}

上の例では、カラースキームを指定するスキームパラメーターを受け入れる FlexColorScheme.light() と FlexColorScheme.dark() を使用して、明るいカラーテーマと暗いカラーテーマを作成しました。

3. Flutter コンポーネントで FlexColorScheme.themed() を使用して、上で作成したカラーテーマを適用します。

Container(
  color: FlexColorScheme.themed(Colors.blue),
  child: Center(
    child: Text('Hello, world!', style: TextStyle(fontSize: 24)),
  ),
),

上の例では、FlexColorScheme.themed() を使用して、現在のカラースキームに基づいて背景色を自動的に選択します。

https://pub.dev/packages/flex_color_scheme

7. android_intent_plus

序章

android_intent_plus は、Android デバイスでインテントを起動し、データやアクションを指定できるようにする Flutter プラグインです。また、startActivityForResult を使用してアクティビティを開始し、完了時に結果を受け取ることもできます。

使用するシーン

android_intent_plus は主に、Android プラットフォームと対話する必要がある Flutter アプリケーションに適しています。android_intent_plus は、次のシナリオで特に役立ちます。

Android プラットフォームの API の呼び出し: Flutter では、一部の Android SDK API は Flutter プラグインとして直接パッケージ化されていません。この場合、android_intent_plus を使用してインテントを開始し、これらの API を呼び出すことができます。

別のアプリケーションを起動する: android_intent_plus を使用して他のアプリケーションを起動し、それらにデータを渡すことができます。たとえば、android_intent_plus を使用してブラウザアプリケーションを起動し、特定の URL を開くことができます。

アクティビティ結果の受信: 場合によっては、開始されたアクティビティから結果を取得する必要がある場合があります。android_intent_plus では、startActivityForResult メソッドを使用してアクティビティを開始し、完了時に結果を受け取ります。

例

android_intent_plus の使用は非常に簡単です。pubspec.yaml ファイルに依存関係を追加し、コードにライブラリをインポートするだけで準備完了です。

1.依存関係を追加する

pubspec.yaml ファイルの依存関係セクションに次の行を追加します。

dependencies:
  android_intent_plus: ^3.0.0

2.ライブラリのインポート

Flutter アプリ内の任意のファイルで、android_intent_plus をインポートできます。

import 'package:android_intent_plus/android_intent.dart';

3. 入門コード例

以下は、android_intent_plus を使用してブラウザアプリケーションを起動し、特定の URL を開く方法の簡単な例です。

import 'package:android_intent_plus/android_intent.dart';

void openBrowser(String url) {
  final intent = AndroidIntent(
    action: 'android.intent.action.VIEW',
    data: Uri.encodeFull(url),
    package: 'com.android.chrome',
    componentName: ComponentName(
      'com.android.chrome',
      'com.google.android.apps.chrome.Main',
    ),
  );
  intent.launch();
}

このコードは、特定の URL で Chrome ブラウザを開きます。

android_intent_plus は、Android デバイス上でインテントを起動し、データやアクションを指定できるようにする非常に便利な Flutter プラグインです。また、startActivityForResult を使用してアクティビティを開始し、完了時に結果を受け取ることもできます。Android プラットフォームと対話する必要がある場合は、android_intent_plus を検討する価値のあるオプションです。

https://pub.dev/packages/android_intent_plus

要約する

現在、Flutter は、モバイルアプリケーション開発の分野で最も人気のあるクロスプラットフォーム開発フレームワークの 1 つとなっています。開発効率とコードの品質を向上させるために、開発プロセスではサードパーティのライブラリを使用するのが一般的です。この記事では、Flutter 開発に非常に役立ついくつかのサードパーティライブラリ (Freezed、flutter_native_splash、GoRouter、just_audio、json_serializable、flex_color_scheme および plus_plugins の一部のライブラリ、android_intent_plus) を紹介します。

これらのライブラリは、さまざまな機能と使用シナリオをカバーしています。たとえば、Freezed は、開発者がデータモデルをより効率的に作成および管理できるように支援します。flutter_native_splash は、Flutter アプリケーションにカスタムスプラッシュスクリーンを提供します。GoRouter は、アプリケーションのナビゲーションをより柔軟にします。just_audio は、強力なオーディオ再生を提供します。 Flutter アプリケーション用の関数; json_serializable は、Dart データモデルのシリアル化および逆シリアル化コードを自動的に生成できます; flex_color_scheme は、開発者が Flutter アプリケーション用のカスタムカラーテーマを作成するのに役立ちます; plus_plugins および android_intent_plus の一部のライブラリは、Android プラットフォーム固有の機能をアプリケーションに追加できます。

これらのライブラリを使用すると、Flutter 開発者は高品質のアプリケーションと優れたユーザーエクスペリエンスを確保しながら、開発プロセスの効率を向上させることができます。新しいプロジェクトを開発する場合でも、既存のプロジェクトを更新する場合でも、これらのライブラリはチェックしてみる価値があります。

今日の共有は以上です。お役に立てば幸いです。読んでいただきありがとうございます。記事を作成するのは簡単ではありません。私の共有が気に入ったら、より多くの人に見てもらえるように、「いいね！」と転送することを忘れないでください。最後に注目を忘れないでください」フロントエンドエキスパート」では、皆様のご支援がシェアの最大のモチベーションとなり、今後もより多くのコンテンツをアウトプットしていきますので、ご期待ください。

開発作業を容易にする 7 つの便利な Flutter ライブラリを共有します

1.冷凍

2.flutter_native_splash

3. go_router

4. just_audio

5. json_serializable

6. フレックスカラースキーム

7. android_intent_plus

要約する

おすすめ