Flutter toast プラグイン選定(2019/07/20)

注意

webエンジニアが片手間でflutterでくだらないアプリを作成したときの備忘録です。
アプリのガイドラインに沿わない情報もあるかもですがご容赦ください。

2019/07/18時点でのToast pluginの種類

• toast
• fluttertoast
• flutter_just_toast
• oktoast

pub.devでtoastで検索すると上位に上記4種類が出てくる。
flutter_just_toastはもう半年以上更新がないのでやめておいたほうが良い。
手軽に使えるのはtoast/fluttertoast、カスタマイズ性が一番高いのはoktoastである。

結論としてoktoastを採用した。

今回は備忘録のために、採用理由と簡単な使い方を記す。

採用理由

要件として以下のものがあった。

• 利用できる画面に制限がない
• 画面ごとに出せる
• 連続で表示したかったので、できる限り表示時間を短くしたい
• fontのカスタマイズをしたい

toast/fluttertoastは上2つの要件は満たしているが、

• 表示時間はshort/longの2値からしか選べない
• fontに関しては色、サイズしか選べない

という仕様であるため、採用にはならなかった。
逆に言うとシンプルにtoastを実装したいならtoast/fluttertoastの方が良いだろう。

使い方(fluttertoast vs oktoast)

各How to Useより抜粋

fluttertoast

import 'package:fluttertoast/fluttertoast.dart';

class _okToastExampleState extends State<okToastExample> {
  @override
  void initState() {
    super.initState();
  }

  showToast() {
    Fluttertoast.showToast(
      msg: "This is Center Short Toast",
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
      timeInSecForIos: 1,
      backgroundColor: Colors.red,
      textColor: Colors.white,
      fontSize: 16.0
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Text('Tap!!!'),
      onTap: () {
        showToast();
      },
    );
  }
}

これだけで呼び出せるため、シーンを選ばず大変利用しやすい。
toastの方はcontextなども引数に含めないと行けないので、思い付かないが利用シーンを制限されることもあるかもしれない。

oktoast

class _okToastExampleState extends State<okToastExample> {
  @override
  void initState() {
    super.initState();
  }

  showOkToast() {
    showToast(
      'oktoast',
      duration: Duration(seconds: 1),
      position: ToastPosition.bottom,
      backgroundColor: Colors.black.withOpacity(0.5),
      radius: 13.0,
      textStyle: TextStyle(
        fontSize: 16.0,
        color: Colors.white,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return OKToast( //OKToastで囲う
      child: GestureDetector(
        child: Text('Tap!!!'),
        onTap: () {
          showOkToast();
        },
      ),
    );
  }
}

oktoastもシンプルにはかけるが、OKToastのwidgetで囲わなくてはならない。
Exampleには"wrap your app with OKToast"とあってMaterialApp全体を囲っているが、個別に囲っても問題ないし、他の複数のwidgetをラップしても問題なく動作する。
fontや表示時間などをカスタマイズしたいときはこれ一択なのでぜひ利用してみてほしい。

まとめ

• サクッと入れるだけならfluttertoast
• カスタマイズしたいならoktoast