讓你的 Flutter 開發更高效

為什麼要編寫自定義功能，當你可以使用庫呢？庫是開發者最好的朋友和救命稻草。在我看來，一個好的項目應該充分利用一些最好的可用庫。

本文是有關 Flutter 中很棒的庫系列文章的一部分，我總結了7個 Flutter 庫，這些庫将有助于您在開發過程中前進。

1. freezed

簡介

Freezed 是一個基于 Dart 語言的 Flutter 庫，它可以幫助您快速生成不可變的資料類和聯合類型。在 Flutter 開發中，我們經常需要定義資料類和聯合類型，以表示我們的資料和狀态。使用 Freezed，我們可以輕松地定義這些類和類型，并且它們都是不可變的，這有助于提高應用程式的性能和可維護性。

使用場景

Freezed 可以用于以下場景：

定義不可變的資料類和聯合類型。
簡化狀态管理器中的資料類定義。
提高代碼的可讀性和可維護性。

示例

要使用 Freezed 庫，您需要在項目中添加依賴項。您可以在 pubspec.yaml 檔案中添加以下代碼：

dependencies:
  freezed: ^1.2.0

接下來，您需要建立一個 Dart 檔案，其中包含您要定義的資料類和聯合類型。在該檔案中，您需要導入 freezed_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 的資料類。它有兩個必需的屬性：name 和 age。我們還定義了一個名為 _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 執行個體以及定義兩個路由的示例。

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 播放本地音頻檔案的簡單示例。首先，需要在 pubspec.yaml 檔案中添加 just_audio 依賴項：

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 方法開始播放音頻。

在 dispose 方法中，需要調用 dispose 方法來釋放 AudioPlayer 執行個體占用的資源。

最後，在 build 方法中，使用 Scaffold 和 Text 小部件來顯示正在播放音頻。

just_audio 是一個功能強大的 Flutter 庫，它可以幫助您在 Flutter 應用程式中輕松地播放音頻。使用 just_audio，您可以輕松地播放本地和遠端音頻檔案，并可以添加自定義通知和自定義播放器 UI。如果您正在開發一個需要音頻播放功能的 Flutter 應用程式，just_audio 将會是您的不二選擇。

https://pub.dev/packages/just_audio

5. json_serializable

簡介

json_serializable 是一個可以自動生成與 JSON 序列化和反序列化相關代碼的 Flutter 庫，它使用了 Dart 代碼生成器和注釋。本庫能夠幫助 Flutter 開發人員在處理 JSON 資料時更加高效、友善地生成相關代碼。

使用場景：

當你需要在 Dart 中序列化/反序列化 JSON 資料時，json_serializable 是非常實用的工具。它能夠自動生成必要的 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 庫，它能夠幫助 Flutter 開發人員更加友善地處理 JSON 資料。通過注釋和代碼生成器，它能夠自動生成序列化/反序列化相關的代碼，減少了手寫代碼的工作量。

https://pub.dev/packages/json_serializable

6. flex_color_scheme

簡介

flex_color_scheme 是一個用于建立靈活的、高度可定制的顔色方案的 Flutter 庫。使用此庫可以快速建立應用程式的顔色主題，友善開發人員根據設計要求進行定制，同時還支援 Flutter Material Design 和 Cupertino（iOS 風格）的主題規範。

使用場景

flex_color_scheme 主要适用于那些需要定制應用程式顔色主題的 Flutter 項目。其主要使用場景包括：

快速建立靈活的、高度可定制的顔色方案，以适應設計要求。
支援 Flutter Material Design 和 Cupertino（iOS 風格）的主題規範。
可以輕松地與 Flutter 應用程式中的 Material 元件內建。
可以為應用程式提供自定義的主題色和亮度。

示例

以下是使用 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() 建立了淺色和深色的顔色主題，這兩個方法接受一個 scheme 參數，用于指定顔色方案。

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是一個Flutter插件，允許您在Android裝置上啟動Intent，并允許您指定資料和/或操作。此外，它還允許您使用startActivityForResult啟動活動，并在其完成時接收結果。

使用場景

android_intent_plus主要适用于需要與Android平台進行互動的Flutter應用程式。在以下場景中，android_intent_plus可能特别有用：

調用Android平台的API：在Flutter中，有一些Android SDK API沒有被直接封裝為Flutter插件。在這種情況下，您可以使用android_intent_plus啟動一個Intent來調用這些API。

啟動另一個應用程式：您可以使用android_intent_plus啟動其他應用程式，并将資料傳遞給它們。例如，您可以使用android_intent_plus啟動浏覽器應用程式并打開特定的URL。

接收活動結果：在某些情況下，您可能需要從啟動的活動中擷取結果。使用android_intent_plus，您可以使用startActivityForResult方法啟動活動，并在其完成時接收結果。

示例

使用android_intent_plus非常簡單。隻需要在pubspec.yaml檔案中添加依賴項，然後在代碼中導入庫，即可開始使用。

1、添加依賴項

在pubspec.yaml檔案中，将以下行添加到dependencies部分：

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();
}

此代碼将打開Chrome浏覽器，并打開特定的URL。

android_intent_plus是一個非常有用的Flutter插件，可以讓您在Android裝置上啟動Intent，并允許您指定資料和/或操作。此外，它還允許您使用startActivityForResult啟動活動，并在其完成時接收結果。如果您需要與Android平台進行互動，那麼android_intent_plus是一個值得考慮的選擇。

https://pub.dev/packages/android_intent_plus

總結

當今，Flutter已成為移動應用開發領域中備受歡迎的跨平台開發架構之一。為了提高開發效率和代碼品質，使用第三方庫是開發過程中的常見實踐。本文介紹了幾個在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. freezed

2. flutter_native_splash

3. go_router

4. just_audio

5. json_serializable

6. flex_color_scheme

7. android_intent_plus

總結

繼續閱讀

現代移動開發哪家強：原生還是跨平台？JetBrains 專家：選 Flutter

Flutter小說閱讀器開發：第二章目錄架構與第三方依賴包

Flutter學習日記之Image元件詳解

Flutter 如何實作性能優化

Flutter 地圖在攜程的最佳實踐

Flutter 3.7 新特性：背景isolate通道使用介紹

業務創新的利器：探索Flutter與小程式容器的融合應用

Flutter基礎之ListView的基本使用

Flutter基礎之Json資料解析

Flutter基礎之Navigator路由跳轉

Flutter 的線程模型和異步原理

手賤，Flutter版本更新帶來的一系列坑。。。

Flutter的應用場景與限制：一文解析

Flutter代碼靜态檢查原理與應用

五大跨平台桌面應用開發架構：Electron、Tauri、Flutter等

Flutter 可以折疊展開的Text控件