はじめに

業務ではバックエンド開発を行っており、趣味でFlutterを触っています。
Flutterで開発を行う際に、pub.devで良さげなパッケージを探すことは少なくはないのでしょうか。そこで、本稿では個人的に使ってみて良かったパッケージを5つ紹介します。

環境

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.6, on macOS 11.4 20F71
    darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android
    SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.61.1)
[✓] Connected device (2 available)

$ dart --version
Dart SDK version: 2.10.4 (stable) (Wed Nov 11 13:35:58 2020 +0100) on "macos_x64"

carousel_slider

無限スクロールやカスタムウィジェットの利用、オートプレイが行えます。
また、オプションによってループさせたりアクティブとなった画像のスケールアップなどが可能となります。

導入例

CarouselSliderクラスのフィールドで保持しているCarouselOptions によってオプションの指定ができます。

carousel_slider.dart

class CarouselSlider extends StatefulWidget {
  /// [CarouselOptions] to create a [CarouselState] with
  ///
  /// This property must not be null
  final CarouselOptions options;

  /// The widgets to be shown in the carousel of default constructor
  final List<Widget> items;

  /// The widget item builder that will be used to build item on demand
  /// The third argument is the PageView's real index, can be used to cooperate
  /// with Hero.
  final ExtendedIndexedWidgetBuilder itemBuilder;

  /// A [MapController], used to control the map.
  final CarouselControllerImpl _carouselController;

  final int itemCount;

  CarouselSlider(
      {@required this.items,
      @required this.options,
      carouselController,
      Key key})
      : itemBuilder = null,
        itemCount = items != null ? items.length : 0,
        _carouselController = carouselController ?? CarouselController(),
        super(key: key);

  /// The on demand item builder constructor
  CarouselSlider.builder(
      {@required this.itemCount,
      @required this.itemBuilder,
      @required this.options,
      carouselController,
      Key key})
      : items = null,
        _carouselController = carouselController ?? CarouselController(),
        super(key: key);

  @override
  CarouselSliderState createState() => CarouselSliderState(_carouselController);
}

デフォルトコンストラクタでは以下のような設定がされています。

carousel_options.dart

import 'package:flutter/material.dart';

enum CarouselPageChangedReason { timed, manual, controller }

enum CenterPageEnlargeStrategy { scale, height }

class CarouselOptions {
  //　コンストラクタのみ抜粋
  CarouselOptions({
    this.height,
    this.aspectRatio: 16 / 9,
    this.viewportFraction: 0.8,
    this.initialPage: 0,
    this.enableInfiniteScroll: true,
    this.reverse: false,
    this.autoPlay: false,
    this.autoPlayInterval: const Duration(seconds: 4),
    this.autoPlayAnimationDuration = const Duration(milliseconds: 800),
    this.autoPlayCurve: Curves.fastOutSlowIn,
    this.enlargeCenterPage = false,
    this.onPageChanged,
    this.onScrolled,
    this.scrollPhysics,
    this.pageSnapping = true,
    this.scrollDirection: Axis.horizontal,
    this.pauseAutoPlayOnTouch: true,
    this.pauseAutoPlayOnManualNavigate: true,
    this.pauseAutoPlayInFiniteScroll: false,
    this.pageViewKey,
    this.enlargeStrategy: CenterPageEnlargeStrategy.scale,
    this.disableCenter: false,
  });
}

導入例は以下のようにカルーセルを実装しており、enlargeCenterPage・autoPlay・enlargeCenterPageを変更しています。

sample.dart

@override
Widget build(BuildContext context) {
return Container(
  child: CarouselSlider.builder(
    options: CarouselOptions(
      height: 160.0,
      autoPlay: true,
      disableCenter: true,
      enlargeCenterPage: true,
    ),
    itemCount: documents.length,
    itemBuilder: (BuildContext context, int index, int realIndex) {
    // 省略
}

flutter_native_splash

アプリ起動時にデフォルトだと真っ白な画面が表示されます。
そこで、好みの色や画像を表示させるためにこちらのパッケージを利用します。

このパッケージは、Dartファイル上でimportして使うのではなくpubspec.yamlかflutter_native_splash.yamlに設定を記述することで適応できます。
背景色や画像以外にも、ダークテーマ時の設定やOS毎で位置設定もできます。
詳細はドキュメントを御覧ください。

pubspec.yaml

dev_dependencies:
  flutter_native_splash: ^1.3.2

flutter_native_splash:
  #背景色の指定
  color: "#42a5f5"
  #背景画像の指定
  background_image: "assets/background.png"

設定を記述したあとは、以下コマンドを実行します。

$ flutter pub run flutter_native_splash:create

ちなみに、pub.devで動画によるチュートリアルも紹介されています。

url_launcher

外部ブラウザでURLにアクセスする以外にも、スキーマを指定することで電話の発信・メール作成・SMS送信もできるようになります。

公式のサンプル

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

const String _url = 'https://flutter.dev';

void main() => runApp(
      const MaterialApp(
        home: Material(
          child: Center(
            child: RaisedButton(
              onPressed: _launchURL,
              child: Text('Show Flutter homepage'),
            ),
          ),
        ),
      ),
    );

void _launchURL() async {
  if (!await launch(_url)) throw 'Could not launch $_url';
}

shimmer

コンテンツの読み込み中にワイヤーフレームのようなウェジェットを表示させ、スケルトンスクリーンを簡単に実装することができます。

導入例

同じくスケルトンスクリーンを導入する際に検討したパッケージにflutter_shimmerがありました。

個人的に感じた両パッケージの違いは、柔軟性の有無にあるかと思います。
導入例でも使っていたshimmerのほうがより柔軟な印象でした。
Shimmerは適応するウィジェットを自作できるのに対し、flutter_shimmerはパッケージで準備されたモード（典型的なUIの雛形のようなもの）を選択します。flutter_shimmerのほうが導入は簡単ですが、読み込み後に表示されるウィジェットとデザインの差異が生じることがあるので、実装コストやデザインを天秤にかけて採用パッケージを決めると良いかもしれません。

以下はshimmerを使った実装の例です。
読み込み後に表示させるウィジェットを元にSizeBoxでサイズを指定することで、違和感なく見た目を整えることができます。

sample.dart

import 'package:shimmer/shimmer.dart';

class ShimmerImage extends StatelessWidget {
  const ShimmerImage({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4.0),
        child: SizedBox(
          width: 280,
          height: 160,
          child: Shimmer.fromColors(
            baseColor: Colors.grey[300],
            highlightColor: Colors.grey[100],
            child: Container(
              color: Colors.grey,
            ),
          ),
        ),
      ),
    );
  }
}

paginate_firestore

パッケージ内部でFireStoreをいい感じにラップしてくれて、ページネーション機能を簡単に使えるようにしてくれます。

itemsPerPageでページあたりの読み込み数を指定し、itemBuilderTypeで以下の3つからビルダータイプを選択します。

paginate_firestore.dart

enum PaginateBuilderType { listView, gridView, pageView }

簡単な実装例は以下の通りです。

sample.dart

class WatchedWorkList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: PaginateFirestore(
        itemsPerPage: 10,
        itemBuilderType: PaginateBuilderType.listView,
        shrinkWrap: true,
        itemBuilder: (index, context, documentSnapshot) {
          final data = documentSnapshot.data();
          Work work = Work.fromMap(data);
         // 省略
        }
        query: FirebaseFirestore.instance
            .collection('user')
            .doc("xxxxxxxxxxxxxxxxxxxxx")
            .collection("watched")
            .orderBy('id'),
        isLive: true,
      ),
    );
  }
}

最後に

パッケージを導入する際はNull safetyに対応していることや、Flutter Favoriteバッチの有無にも注目してみると良いかもしれません。

【Flutter】使い勝手の良かったパッケージ5選

はじめに

もくじ

環境

carousel_slider

導入例

flutter_native_splash

url_launcher

shimmer

導入例

paginate_firestore

最後に