FlutterのDEBUGバナーのようなバナーをお手軽に表示する

Flutterをdebugモードで起動すると出てくる右上のアレみたいなバナーを表示するコード。割と使えそうなので備忘録に残しておく。

見た目

ソースコード

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56.0,
      decoration: BoxDecoration(
          color: Theme.of(context).primaryColor,
          borderRadius: BorderRadius.circular(8.0),
          boxShadow: [BoxShadow(color: Colors.grey[400], blurRadius: 3.0, spreadRadius: 0.0)]
      ),
      child: Row(
        children: <Widget>[
          Container(
            width: 70.0,
            height: 56.0,
            child: ClipRect(
              child: CustomPaint(
                painter: BannerPainter(
                  message: "with",
                  textDirection: Directionality.of(context),
                  layoutDirection: Directionality.of(context),
                  location: BannerLocation.topStart,
                  color: const Color(0xFF0099FF),
                ),
              ),
            ),
          ),
          Text("痴漢をさせない・見逃さない"),
        ],
      ),
    );
  }
}

CustomPaintのpainterにBannerPainterを使うとDEBUGバナーと同じ斜めのバナーを表示してくれる。そのままだと端っこがかっこ悪いので、ClipRectで囲って親のContainerに収まってくれるように調整する。