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

2021-09-02

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

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

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

また、私はまだAndroidの実機でしかflutterで作成したアプリの動作確認をしたことがなく、iOSでの動作確認はいまだしたことがないので、もしかするとiOSでは正常に動作しないかもしれません。

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

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

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

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

設定画面 settings_ui

pub.dev:https://pub.dev/packages/settings_ui

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

import文

import 'package:settings_ui/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

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

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

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();
  },
),
//省略

アプリ情報の取得 package_info

pub.dev:https://pub.dev/packages/package_info

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

このパッケージは、2021年末で更新が終了される予定。

この後継の、package_info_plusの使用が推奨されています。

ただ、package_info_plusは私の環境ではエラーが出たので、とりあえずpackage_infoを使っています(私のミスである可能性が高い)。

使用方法は変わらないです。

import文

import 'package:package_info/package_info.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なので注意が必要です。

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.isAndroid) { //Platformを使うには、import 'dart:io';が必要
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    } else {
      return null;
    }
  }

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

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

//省略

class _MyHomePageState extends State<MyHomePage> {
  AdmobBannerSize bannerSize;
  AdmobInterstitial interstitialAd;
  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) {
  interstitialAd.show();
}

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

AdMob広告表示 google_mobile_ads

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

同じく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>
<key>SKAdNetworkItems</key>
  <array>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>cstr6suwn9.skadnetwork</string>
    </dict>
  </array>

使用例(仮)

私がこのパッケージで使ったことのある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();
  }

あとがき

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

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

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

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