アフィリエイト広告を利用しています

【Flutter】今まで使ったパッケージまとめ【随時更新】

2021-09-02

今までに使ったflutterのパッケージをまとめます。

今後使う際に、いちいち過去のプロジェクトやそのパッケージのページを参照するのは手間なので、このページに一括して、過去のプロジェクトでの使用例も踏まえて記載していきます。

コードがおかしい部分もあるかもしれませんが、一応動作する例として記載しておきます。

まとめる順番は、私が使ったことの多いパッケージ順。

pubspec.yamlのdependenciesへの記述文はこの記事で書きませんが（VSCodeなら簡単にできる（参考サイト））、import文は書いておきます。

（コード文の右上にJavaScriptと表示してありますが、実際はDartです。）

私が開発したアプリ一覧はこちら↓

アプリアイコン設定　flutter_launcher_icons

アプリアイコンを設定するパッケージ。

デフォルトではFlutterのアイコンになっているので、これを更新する形になります。

アイコン画像の導入

アイコン画像を導入します。

私は、Android StudioのImage Assetでアプリアイコンを設定した際に作成されるic_launcher-playstore.pngを、アイコン画像として使っています。

アイコン画像は、プロジェクトフォルダルートのassets/iconにicon.pngとして保存しました。

pubspec.yamlへの記述

このパッケージはコマンドラインツールなので、通常のパッケージとは異なり、dev_dependenciesに追加します。

最新versionはpub.devから確認してください。

そして、このdev_dependenciesやdependenciesと同じ階層（一番左）にflutter_launcher_iconsの設定を追加します。

私は、AndroidのアプリアイコンはAndroid StudioのImage Assetsから設定しているので、androidをfalseにし、iosのみtrueにしています。

dev_dependencies:
  flutter_launcher_icons: ^0.9.2

flutter_icons:
  android: false
  ios: true
  image_path: "assets/icon/icon.png"

コードを走らせる

上記の設定が終わったら、以下のコマンドをターミナルで走らせます。

flutter pub get
flutter pub run flutter_launcher_icons:main

これでアプリアイコンが設定できます。

スプラッシュ画面　flutter_native_splash

スプラッシュ画面（起動時に表示される画面）を設定できるパッケージ。

デフォルトでは単に白いスプラッシュ画面が設定されている状態なので、このパッケージによる設定は必須だといっていいと思います。

アイコン画像の導入

アイコン画像を導入します。

私は、Android StudioのImage Assetでアプリアイコンを設定した際に作成されるic_launcher-playstore.pngを、スプラッシュ画面のアイコン画像として使っています。

アイコン画像は、プロジェクトフォルダルートのassets/splash内にsplash.pngとして保存しました。

pubspec.yamlへの記述

このパッケージはコマンドラインツールなので、通常のパッケージとは異なり、dev_dependenciesに追加します。

最新versionはpub.devから確認してください。

そして、このdev_dependenciesやdependenciesと同じ階層（一番左）にflutter_native_splashの設定を追加します。

dev_dependencies:
  flutter_native_splash: ^1.3.1

flutter_native_splash:
  image: "assets/splash/splash.png"
  color: "FFFFFF"

コードを走らせる

上記の設定が終わったら、以下のコマンドをターミナルで走らせます。

flutter pub run flutter_native_splash:create

これでスプラッシュ画面が設定できます。

設定画面　flutter_settings_ui

pub.dev：https://pub.dev/packages/flutter_settings_ui

よく見る設定画面を簡単につくれるパッケージ。

settings_uiをフォークしたもの。

settings_uiではタイトルが途中で省略されるなどバグがあったので、flutter_settings_uiを使用しています。

import文

import 'package:flutter_settings_ui/flutter_settings_ui.dart';

使用例

class MySettingsPage extends StatefulWidget {
  @override
  _MySettingsPageState createState() => _MySettingsPageState();
}

class _MySettingsPageState extends State<MySettingsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('設定'),
        ),
        body: SettingsList(
          sections: [
            SettingsSection(
              titlePadding: EdgeInsets.all(15),
              title: 'DATA',
              tiles: [
                SettingsTile(
                  title: 'Language',
                  subtitle: 'English',
                  leading: Icon(Icons.language),
                  onPressed: (BuildContext context) {},
                ),
                SettingsTile.switchTile(
                  title: 'Use fingerprint',
                  leading: Icon(Icons.fingerprint),
                  switchValue: value,
                  onToggle: (bool value) {},
                ),
              ],
            ),
            SettingsSection(
              titlePadding: EdgeInsets.all(15),
              title: 'DATA',
              tiles: [
                SettingsTile(
                  title: 'Language',
                  subtitle: 'English',
                  leading: Icon(Icons.language),
                  onPressed: (BuildContext context) {},
                ),
                SettingsTile.switchTile(
                  title: 'Use fingerprint',
                  leading: Icon(Icons.fingerprint),
                  switchValue: value,
                  onToggle: (bool value) {},
                ),
              ],
            ),
          ],
        ));
  }
}

URLを開く　url_launcher

pub.dev：https://pub.dev/packages/url_launcher

URLを開くパッケージ。

import文

import 'package:url_launcher/url_launcher.dart';

Info.plistの編集

ios > Runner 内にあるInfo.plistに以下の文を追加。

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>https</string>
  <string>http</string>
</array>

AndroidManifest.xmlの編集

android > app > src > main 内にあるAndroidManifest.xmlに以下の文を追加（applicationタグと並列）。

以下の文は、https URLを開く場合。

<queries>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="https" />
  </intent>
</queries>

使用例

//省略
class _MySettingsPageState extends State<MySettingsPage> {
  _launchURL() async {
    const url = 'https://enoiu.com/app/';
    if (await canLaunch(url)) {
      await launch(
        url,
        forceSafariVC: false,
        forceWebView: false, //外部ブラウザで開く
      );
    } else {
      throw 'You cannot access this URL';
    }
  }

  @override
  Widget build(BuildContext context) {
//省略
              SettingsTile(
                title: 'このアプリについて',
                subtitle: 'ブラウザで開きます',
                leading: Icon(Icons.open_in_new),
                onPressed: (BuildContext context) {
                  _launchURL();
                },
//省略
  }
}

レビューページを開く　launch_review

pub.dev：https://pub.dev/packages/launch_review

アプリストア内にあるアプリのレビューページを開くパッケージ。

ビルド時にエラーが出るが、動作には問題ない模様。

追記：iOSでは動作しなかったので、in_app_reviewを使うようになりました。in_app_reviewについては次の見出し以降で説明しています。

import文

import 'package:launch_review/launch_review.dart';

Info.plistの編集

ios > Runner内にあるInfo.plist内に以下の文を追加

<key>LSApplicationQueriesSchemes</key>
<array>
        <string>itms-beta</string>
        <string>itms</string>
</array>

使用例

LaunchReview.launch(); という記述のみでok。

//省略
SettingsTile(
  title: 'このアプリを評価する',
  leading: Icon(Icons.rate_review),
  onPressed: (BuildContext context) {
    LaunchReview.launch();
  },
),
//省略

アプリ内でレビューできる　in_app_review

アプリ内でレビューができるパッケージ。

どのように表示されるかは、上記ページをご覧ください。

import文

import 'package:in_app_review/in_app_review.dart';

使用例

//
                  SettingsTile(
                    title: Text('このアプリを評価する'),
                    leading: Icon(Icons.rate_review),
                    onPressed: (BuildContext context) async {
                      final InAppReview inAppReview = InAppReview.instance;
                      if (await inAppReview.isAvailable()) {
                        inAppReview.requestReview();
                      }
                    },
                  ),
//
//何かの操作の後表示する場合、操作の邪魔をしないように遅らせるほうがいいかも？
        final InAppReview inAppReview = InAppReview.instance;
        if (await inAppReview.isAvailable()) {
          Future.delayed(const Duration(seconds: 1), () {
            inAppReview.requestReview();
          });
        }

アプリ情報の取得　package_info_plus

アプリの情報を取得するパッケージ。

package_infoの後継です。

package_infoと使い方は同じです。

import文

import 'package:package_info_plus/package_info_plus.dart';

使用例

//省略
SettingsTile(
  title: 'ライセンスを表示',
  leading: Icon(Icons.description),
  onPressed: (BuildContext context) async {
    final info = await PackageInfo.fromPlatform();
    showLicensePage(
      context: context,
      applicationName: info.appName,
      applicationVersion: info.version,
      //applicationIcon: ,
      applicationLegalese: '2021 \u00a9 ENOIU',
    );
  },
)
//省略

データ保存　shared_preferences

pub.dev：https://pub.dev/packages/shared_preferences

データ保存するパッケージ。

import文

import 'package:shared_preferences/shared_preferences.dart';

使用例

//省略
class _MyHomePageState extends State<MyHomePage> {

  //data
  List<String> listTitle = [];

  //shared preference

  //get
  Future<void> _getSharedPreferences() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      listTitle = prefs.getStringList('_listTitle') ?? [];
    });
  }

  //set
  Future<void> _setSharedPreferences() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setStringList('_listTitle', listTitle);
  }

  //clear
  void _clearSharedPreferences() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.clear();
    setState(() {
      listTitle = [];
    });
  }

  @override
  void initState() {
    _getSharedPreferences();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
//省略

AdMob広告表示　admob_flutter

pub.dev：https://pub.dev/packages/admob_flutter

実装方法：https://github.com/kmcgill88/admob_flutter/wiki

AdMob広告を表示するパッケージ。

後述のgoogle_mobile_adsが公式のパッケージですが、個人的にはadmob_flutterの方が使いやすいです（コードがわかりやすい）。

ただし、Null Safetyのバージョンはまだpre-releaseなので注意が必要です。
Null Safetyバージョンが2.0.0としてStableになりました。

null safetyに対応したコード例を載せています。

import文

import 'package:admob_flutter/admob_flutter.dart';

AndroidManifest.xmlの編集

android > app > src > main 内にあるAndroidManifest.xmlに以下の文を追加（applicationタグ内）。

※valueは各自のものを入力。以下のvalueはテスト広告。

<meta-data
  android:name="com.google.android.gms.ads.APPLICATION_ID"
  android:value="ca-app-pub-3940256099942544~3347511713"/>

Info.plistの編集

ios > Runner内にあるInfo.plistに以下の文を追加。

※stringタグ内は各自のものを。

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
<key>io.flutter.embedded_views_preview</key>
<true/>

使用例

void main() {
  WidgetsFlutterBinding.ensureInitialized(); //追加
  Admob.initialize(); //追加
  runApp(MyApp());
}

//省略

class AdMobService { //以下の広告ユニットIDはテスト広告
  String getBannerAdUnitId() {
    // iOSとAndroidで広告ユニットIDを分岐
    if (Platform.isIOS) { //Platformを使うには、import 'dart:io';が必要
      return 'ca-app-pub-3940256099942544/2934735716';
    } else {
      return 'ca-app-pub-3940256099942544/6300978111';
    }
  }

  String getInterstitialAdUnitId() {
    if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/4411468910';
    } else {
      return 'ca-app-pub-3940256099942544/1033173712';
    }
  }

  String getRewardAdUnitId() {
    if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/1712485313';
    } else {
      return 'ca-app-pub-3940256099942544/5224354917';
    }
  }
}

//省略

class _MyHomePageState extends State<MyHomePage> {
  late AdmobBannerSize bannerSize;
  late AdmobInterstitial? interstitialAd;
  late AdmobReward? rewardAd;

//省略

  @override
  void initState() {
    super.initState();

    bannerSize = AdmobBannerSize.BANNER;

    interstitialAd = AdmobInterstitial(
      adUnitId: AdMobService().getInterstitialAdUnitId(),
      listener: (AdmobAdEvent event, Map<String, dynamic>? args) {
        if (event == AdmobAdEvent.closed) interstitialAd?.load(); //広告が閉じたときに読み込み
      },
    );

    interstitialAd?.load();

    rewardAd = AdmobReward(
      adUnitId: AdMobService().getRewardAdUnitId(),
      listener: (AdmobAdEvent event, Map<String, dynamic>? args) {
        if (event == AdmobAdEvent.closed) rewardAd?.load(); //広告が閉じたときに読み込み
        if (event == AdmobAdEvent.rewarded) { //リワード獲得時の処理
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text('報酬を獲得しました'),
            duration: Duration(seconds: 5),
            action: SnackBarAction(
              label: 'OK',
              onPressed: () {
                ScaffoldMessenger.of(context).hideCurrentSnackBar();
              },
            ),
          ));
        }
      },
    );

    rewardAd?.load();
  }
  
  @override
  void dispose() {
    interstitialAd?.dispose();
    rewardAd?.dispose();
    super.dispose();
  }

//省略
//バナー広告表示（Widgetとして扱う、Columnのchildrenリスト内など）
AdmobBanner(
  adUnitId: AdMobService().getBannerAdUnitId(),
  adSize: bannerSize,
)

//インタースティシャル広告表示　onPressed: () async {}内で使うことがほとんど
if (await interstitialAd?.isLoaded ?? false) {
  interstitialAd?.show();
}

//リワード広告表示　インタースティシャル広告と同様
if (await rewardAd?.isLoaded ?? false) {
  rewardAd?.show();
}

AdMob広告表示　google_mobile_ads

pub.dev：https://pub.dev/packages/google_mobile_ads

同じくAdMob広告を表示するパッケージ。

まだ使い方をよくわかっていないので、他のサイトで確認をお願いします。

※AdMob公式で設定方法が記載されていました。以下のページを確認してください。

こちらの方の記事で詳細にまとめられています。

import文

import 'package:google_mobile_ads/google_mobile_ads.dart';

AndroidManifest.xmlの編集

android > app > src > main内にあるAndroidManifest.xmlに以下のコードを追加（applicationタグ内）。

※valueの値は各自のものを。

<meta-data
  android:name="com.google.android.gms.ads.APPLICATION_ID"
  android:value="ca-app-pub-3940256099942544~3347511713"/>

Info.plistの編集

ios > Runner内のInfo.plistに以下のコードを追加。

※stringタグ内は各自のもの。

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>

使用例（仮）

私がこのパッケージで使ったことのあるInterstitial Adsのみ使用例を示します。listenerを使ってないので、広告の再読み込みがなされないコードになっています。

//省略
void main() {
  WidgetsFlutterBinding.ensureInitialized(); //追加
  MobileAds.instance.initialize(); //追加

  runApp(MyApp());
}

//省略

class _MyHomePageState extends State<MyHomePage> {
  //ads
  InterstitialAd? _interstitialAd;

  @override
  void initState() {
    super.initState();
    InterstitialAd.load(
        adUnitId: 'ca-app-pub-3940256099942544/1033173712', //osで分岐する場合はこの記事のadmob_flutterでの使用例を参照
        request: AdRequest(),
        adLoadCallback: InterstitialAdLoadCallback(
          onAdLoaded: (InterstitialAd ad) {
            // Keep a reference to the ad so you can show it later.
            this._interstitialAd = ad;
          },
          onAdFailedToLoad: (LoadAdError error) {
            print('InterstitialAd failed to load: $error');
          },
        ));
  }

  @override
  void dispose() {
    _interstitialAd!.dispose();
    super.dispose();
  }

//省略

//インタースティシャル広告表示（onPressed内で使うことがほとんど）
if (_interstitialAd != null) {
  _interstitialAd!.show();
}

フォーマット　intl

pub.dev：https://pub.dev/packages/intl

数字や日付をフォーマットするパッケージ。

多言語化をすることもできますが、多言語化についてはこの次のflutter_localizationで説明します。

かなり機能がありますが、とりあえず使ったことのあるもののみ使用例を示します。

import文

import 'package:intl/intl.dart';

使用例

DateTime now = DateTime.now();
String dateText = DateFormat('yyyy-MM-dd HH:mm').format(now);
//2021-09-01 09:00

double num = 10000 / 3;
String numText = NumberFormat('#,##0.#####', "en_US").format(num);
//3,333.33333
num = double.parse(NumberFormat('#,##0.#####', "en_US").format(num).replaceAll(',', '');
//3333.33333

多言語化　flutter_localizationsなど

多言語化の方法。flutter_localizationsやintlなどが使われます。

私は、Visual Studio Codeで開発していて、Flutter Intlという多言語化対応を支援する拡張機能を使っています。

その拡張機能がインストールされていることを前提に、その使い方をここではまとめます。

Visual Studio Marketplace：https://marketplace.visualstudio.com/items?itemName=localizely.flutter-intl

初期化

プロジェクトファイルを開いた状態で、コマンドパレットを開いて（WindowsではShift+Ctrl+P）、Flutter Intl: Initializeコマンドを実行します。

すると、いろいろフォルダ・ファイルが生成されます。

この際作成されるlib/generatedフォルダは自動で編集されるので、そのフォルダ・ファイルに今後自ら触ることはないです。

lib/l10nフォルダ内にはintl_en.arbファイルが作成されており、これがデフォルトの言語（英語）ということになります。

pubspec.yamlの編集

pubspec.yamlのdependenciesにコードを追加。

dependencies:
    // Other dependencies...
    flutter_localizations:
        sdk: flutter

Info.plistの編集

ios > Runner内にあるInfo.plistに以下のコードを追加。

stringタグ内は、追加する言語を入力（以下はデフォルトの英語と、日本語）。

<key>CFBundleLocalizations</key>
<array>
    <string>en</string>
    <string>ja_JP</string>
</array>

dartファイルの編集

dartファイルに、import文と、MyAppクラス内に以下のようにコードを追加。

import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart';

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            localizationsDelegates: [
                S.delegate,
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
                GlobalCupertinoLocalizations.delegate,
            ],
            supportedLocales: S.delegate.supportedLocales,
            title: 'Flutter Demo',
            home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
}

他の言語を追加

他の言語を追加する場合は、コマンドパレットを開いて、Flutter intl: Add localeを実行し、続いて表示されるコマンドパレットに地域・言語名を入力（日本語の場合、ja_JP）。

すると、 lib/l10nフォルダ内に新たなファイル（日本語の場合、intl_ja_JP.arb）が追加される（lib/generatedフォルダにも自動追加）。

このlib/l10nフォルダ内にあるarbファイルで、それぞれの言語のテキストを管理することになります。

arbファイルの編集

arbファイルでは、{}で囲み、その中で、keyと、keyに対応するテキストを入力します。

例↓

{
  "title": "App",
  "url": "https://enoiu.com/en/app/",
  "deleteThis": "Delete {text}"
}
{
  "title": "アプリ",
  "url": "https://enoiu.com/app/",
  "deleteThis": "{text}を消去"
}

テキストの指定は、{}を使うこと等により動的に行うことができます。

他の使い方は、 公式の説明を参照してください。

dartファイルの記述方法

keyとそれに対応するテキストをarbファイルに書いたら、dartファイルにそのkeyを参照させます。

_launchURL() async {　//url_launcherパッケージを使用
    final url = S.of(context).url;
    if (await canLaunch(url)) {
      await launch(
        url,
        forceSafariVC: false,
        forceWebView: false, //外部ブラウザで開く
      );
    } else {
      throw 'You cannot access this URL';
    }
  }

//省略
return Scaffold(
  appBar: AppBar(
    title: Text(S.of(context).title),
//省略

List<String> list = ['apple', 'banana', 'orange'];
int _index = 0; //ユーザーに選択させる
//省略
Text(S.of(context).deleteThis(list[_index]));
list = list.removeAt(int);

先に、en.arbを編集し終えて、dartファイルにkeyを参照させ終えた上で、ja_JPを追加し、ja_JP.arbにen.arbをコピー・編集するのが効率的だと思います。

検索画面　search_page

pub.dev：https://pub.dev/packages/search_page

検索画面を簡単に作れるパッケージ。

検索機能を簡単に作ることができます。

class MySearchPage… のように新たなページを記述する必要がないのがとても便利。

import文

import 'package:search_page/search_page.dart';

使用例

pub.devにあるExampleを見たほうがわかりやすいです。

//省略
List<String> _name = []; //データ
List<String> _name2 = _name;
//省略
    floatingActionButton: FloatingActionButton(
        onPressed: () => showSearch(
              context: context,
              delegate: SearchPage(
                  onQueryUpdate: (s) => print(s),
                  items: _name,
                  searchLabel: '名前で検索',
                  suggestion: Center(
                    child: Text(''),
                  ),
                  failure: Center(
                    child: Text(''),
                  ),
                  filter: (_name) => [
                        _name.toString(),
                      ],
                  builder: (_name) => Card(
                       child: ListTile(
                          minVerticalPadding: 15,
                          title: Text(
                            _name,
                            style: TextStyle(
                              height: 1.2,
                            ),
                          ),
                          subtitle: Text('No: ${_name2.indexOf(_name).toString()}',
                              style: TextStyle(
                                height: 1.2,
                              )),
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                        ),
                      )),
            ),
        child: Icon(Icons.add);
      ),
//省略

文字のハイライト　substring_highlight

pub.dev：https://pub.dev/packages/substring_highlight

文字をハイライトするパッケージ。

動的にハイライトすることが可能。

ハイライトのスタイルは、通常のTextStyleで指定できます。

import文

import 'package:substring_highlight/substring_highlight.dart';

使用例

String _text = '今日は晴れ';
String _hightlightTerm = '晴れ';

//Text()の置き換えとしてSubstringhighlight()を使う
SubstringHighlight(
  text: _text,
  term: _highlightTerm,
  textStyle: TextStyle(color: Colors.black, height: 1.8, fontSize: 20),
  textStyleHighlight: TextStyle(
    // highlight style
    backgroundColor: Colors.orangeAccent
  ),
);

自動スクロール　scrollable_positioned_list

リスト内の任意のアイテムにスクロールするパッケージ。

六法アプリはこの自動スクロールが主な機能となった。

通常の文章でも、改行ごとにリスト化（.split('\n’)）して、以下の使用例のようにitemBuilderでreturn Text()すれば、リストの見た目をしていなくともこのスクロール機能を使うことができます。

import文

import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';

使用例

final ItemScrollController _itemScrollController = ItemScrollController();
final ItemPositionsListener _itemPositionsListener = ItemPositionsListener.create();

List<String> t = []; //テキストデータ

//ListView.builderをScrollablePositionedList.builderに書き換える形になる controllerとlistenerの設定も追加
ScrollablePositionedList.builder(
  padding: EdgeInsets.only(left: 10, top: 20, right: 10, bottom: 60),
  key: PageStorageKey(0),
  itemCount: t.length,
  itemBuilder: (context, index) {
    return Text('t[index]');
  },
  itemScrollController: _itemScrollController,
  itemPositionsListener: _itemPositionsListener,
),

//indexへのスクロール（アニメーションあり）
_itemScrollController.scrollTo(
  index: 0, 
  duration: Duration(milliseconds: 500), 
  curve: Curves.ease
);

//indexへのスクロール（アニメーションなし）
_itemScrollController.jumpTo(index: 0);

％インジケーター　percent_indicator

pub.dev：https://pub.dev/packages/percent_indicator

パーセントインジケーターのパッケージ。

円形と線形とがある。

Achievementアプリで使用。

import文

import 'package:percent_indicator/percent_indicator.dart';

使用例

int _currentInt = 10;
int _goalInt = 30;

CircularPercentIndicator(
  radius: 55.0,
  lineWidth: 5.0,
  percent: _currentInt / _goalInt,
  center: Text('${_currentInt / _goalInt * 100}%'),
  progressColor: Colors.red,
  animation: true,
),

色選択　flutter_material_color_picker

pub.dev：https://pub.dev/packages/flutter_material_color_picker

カラーピッカーのパッケージ。

標準ではマテリアルカラーを選択させることができるが、独自に設定した色を選択させることも可能。

Achievementアプリで使用。

import文

import 'package:flutter_material_color_picker/flutter_material_color_picker.dart';

使用例

Color _color = Colors.red;

//丸い色ボタンを押すとカラーピッカーが開く処理
ConstrainedBox(
                  constraints: BoxConstraints.tightFor(width: 40, height: 40),
                  child: ElevatedButton(
                    child: Text(''),
                    onPressed: () {
                      showDialog(
                        context: context,
                        builder: (_) {
                          return AlertDialog(
                            contentPadding: const EdgeInsets.all(6.0),
                            title: Text('色を選択'),
                            content: MaterialColorPicker(
                              onColorChange: (Color color) {
                                setState(() {
                                  _color = color;
                                });
                              },
                              selectedColor: _color,
                              shrinkWrap: true,
                            ),
                            actions: <Widget>[
                              TextButton(
                                child: Text('キャンセル'),
                                onPressed: () => Navigator.pop(context),
                              ),
                              TextButton(
                                child: Text('選択'),
                                onPressed: () => Navigator.pop(context),
                              ),
                            ],
                          );
                        },
                      );
                    },
                    style: ElevatedButton.styleFrom(
                      primary: _color,
                      shape: CircleBorder(),
                    ),
                  ),
                ),

グラフ　syncfusion_flutter_charts

pub.dev：https://pub.dev/packages/syncfusion_flutter_charts

syncfusionのヘルプページ：https://help.syncfusion.com/flutter/introduction/overview

様々な種類のグラフを作成できるパッケージ。

上記ヘルプページの一番下にあるリンクから、デモを開くことができます。

※このパッケージは商用パッケージなので、このパッケージを使うには、Syncfusion Commercial Lisenceまたは無料のSyncfusion Community Lisenceを持つことが必要です（pub.devのOverviewにあるDisclaimerより）。
ただし、現在のバージョンでは、ライセンスキーをアプリ内に登録する必要がなくなりました（公式ページより）。
そのため、とりあえず（Community licenseの対象者であれば）Free Syncfusion Community licenseに登録して、ダッシュボードからライセンスをダウンロードしておけばいいと思います（が、私もよくわかっていないので、ご自身でしっかりと確認してください）。
登録には、LinkedInまたはXingアカウントが必要です。

import文

chartsとsparkchartsとがあります。

sparkchartsとは、非常に小さな場所に収まる軽量なグラフです。

使うものの方だけ入れれば大丈夫です。

import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

使用例

上記のpub.debやヘルプページで詳しく実装方法が紹介されています。

ここでは、私が使ったことのある線グラフの例を示します。

このグラフは、百ます計算アプリで使いました。

ちなみに、すでに紹介したflutter_localizationsでの多言語化をしていると、グラフの日付等もローカライズされます。

class SalesData {
  SalesData(this.year, this.sales);

  final DateTime year;
  final int sales;
}

class _MyHomePageState extends State<MyHomePage> {
  // graph zoom
  late ZoomPanBehavior _zoomPanBehavior;

  // tooltip
  late TooltipBehavior _tooltipBehavior;

  // chart data
  List<SalesData> _chartData = [];

  @override
  void initState() {
    _zoomPanBehavior = ZoomPanBehavior(
      // Enables pinch zooming
      enablePinching: true,
      zoomMode: ZoomMode.x,
      enablePanning: true,
    );
    _tooltipBehavior = TooltipBehavior(enable: true, header: '', canShowMarker: false, format: 'point.x：point.y秒');
    super.initState();
  }

//省略

Container(
            child: SfCartesianChart(
              zoomPanBehavior: _zoomPanBehavior,
              // Initialize category axis
              primaryXAxis: DateTimeAxis(intervalType: DateTimeIntervalType.days, rangePadding: ChartRangePadding.round),
              series: <LineSeries<SalesData, DateTime>>[
                LineSeries<SalesData, DateTime>(
                    // Bind data source
                    dataSource: _chartData,
                    xValueMapper: (SalesData sales, _) => sales.year,
                    yValueMapper: (SalesData sales, _) => sales.sales,
                    animationDuration: 200,
                    markerSettings: MarkerSettings(isVisible: true),
                    color: Theme.of(context).primaryColor),
              ],
              tooltipBehavior: _tooltipBehavior,
            )),

httpリクエスト　http

pub.dev：https://pub.dev/packages/http

httpリクエストをするパッケージ。

APIを使うときに使うことが多い？

私は、六法アプリで、e-Govで提供されている法令APIを利用するために、この次に紹介するxmlパッケージとともに使用しました。

import文

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

使用例

Future getData() async {
    http.Response response = await http.get(Uri.parse('https://elaws.e-gov.go.jp/api/8/lawlists/1'));

    //responseを処理
  }

XMLを処理　xml

pub.dev：https://pub.dev/packages/xml

xmlをパース、トラバース、クエリ、変換、構築できるパッケージ。

法令APIはxmlファイルが提供されるので、そのパースのために使用。

import文

import 'package:xml/xml.dart';

使用例

以下の例は、httpパッケージも使用。

List<String> _lawName = [];
List<String> _lawNo = [];

Future getData() async {
    http.Response response = await http.get(Uri.parse('https://elaws.e-gov.go.jp/api/8/lawlists/1'));

    XmlDocument document = XmlDocument.parse(response.body);
    _lawName = document.findAllElements('LawNameListInfo').map((e) => e.findElements('LawName').first.text).toList();
    _lawNo = document.findAllElements('LawNameListInfo').map((e) => e.findElements('LawNo').first.text).toList();
  }

リスト操作　collection

リストを操作できるパッケージ。

[0, 1] == [0, 1]としてもtrueにはならないので、そうした比較をしたい場合はこのパッケージを使うのをおすすめします。

リストを操作する機能がいくつもあるようですが、ここでは、リストが同値かどうかを判断するコードのみ記載します。

import文

import 'package:collection/collection.dart';

使用例

List<int> list1 = [0, 1];
List<int> list2 = [0, 1];
print(list1 == list2); // false
print(ListEquality().equals(list1, list2)); // true

シェア　share_plus

シェア（共有）機能を実装できるパッケージ。

文字テキストやファイルを共有することができます。

shareの後継です。

import文

import 'package:share_plus/share_plus.dart';

使用例

Share.share('シェアしたいテキスト');

//iPadでシェア画面が表示されない場合
final shareButtonKey = GlobalKey();

Rect shareButtonRect() {
  RenderBox renderBox = shareButtonKey.currentContext?.findRenderObject()! as RenderBox;

  Size size = renderBox.size;
  Offset position = renderBox.localToGlobal(Offset.zero);

  return Rect.fromCenter(
    center: position + Offset(size.width / 2, size.height / 2),
    width: size.width,
    height: size.height,
  );
}

Widget build(BuildContext context) {
	...
	IconButton(
	  key: shareButtonKey,
	  icon: Icon(Icons.share),
	  onPressed: Share.share(
      'シェアしたいテキスト'
      sharePositionOrigin: shareButtonRect(),
    );,
	)
}

あとがき

今後も、使ったパッケージは随時追加していきます。

いずれは、自作パッケージを作ってみたい。。

私が開発したアプリ一覧はこちら↓

Flutterについてもっと学びたい方はこちら↓

App DevelopFlutter,How To