【Flutter】flutter_styled_toastのToastに影をつける

flutter_styled_toast ?

上からひょこっと出てくる通知領域的な何かを実装するためのパッケージ。

pub.dev

やり方

showToastWidgetで指定するWidgetをCardWidgetにして、elevationを0より大きい値にする。shapeにRoundedRectangleBorderを指定することで角を丸っこくすることもできる。

※ showToastWidgetのanimation、reverseAnimationにFade効果のあるものを選ぶと影に違和感が出ることに注意。(Cardの角は丸っぽいのに影は角ばって見える)

Widget _content() {
    return Card( // <= これ
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      elevation: 8,  // <= これ
      color: Colors.greenAccent[100],
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.check),
            SizedBox(
              width: 12.0,
            ),
            Text("This is a Custom Toast"),
          ],
        ),
      ),
    );
}

~~

showToastWidget(
      _content(),
      context: context,
      animation: StyledToastAnimation.slideFromTop,
      reverseAnimation: StyledToastAnimation.slideToTop,
      position: StyledToastPosition.top,
      animDuration: const Duration(milliseconds: 700),
      duration: const Duration(seconds: 3),
      curve: Curves.elasticOut,
      reverseCurve: Curves.easeInToLinear,
      isIgnoring: false,
    );