Make your own Flutter corner banners with Super Banners

We all know about the infamous red “debug” banner that appears in a default Flutter app. If you wanted your own corner banner, you may have found the implementation of the debug banner to be a bit daunting, and not very configurable. Today the Flutter Bounty Hunters are launching a proof-of-concept project called super_banners, which makes it easy to compose your own, custom corner banners!

To get started, you can quickly and easily let your users know that your product was built with Flutter by using a BuiltWithFlutterCornerBanner:

BuiltWithFlutterCornerBanner(
  bannerPosition: CornerBannerPosition.topLeft,
  bannerColor: const Color(0xFF222222),
  shadowColor: Colors.black.withOpacity(0.8),
  elevation: 5,
);

Check out the BuiltWithFlutterCornerBanner added to all four corners:

A BuiltWithFlutterCornerBanner on every corner

Of course, the purpose of super_banners is to give you control over what appears within the banners. That’s as easy as passing your own widget as a child :

CornerBanner(
  bannerPosition: CornerBannerPosition.topLeft,
  bannerColor: Colors.blue,
  child: Text("Hello, World!"),
);

A banner with custom text

CornerBanners automatically adjust their thickness to fit whatever content you provide. Just make sure that your content has an intrinsic width and height. Have fun!

If you’d like to see additional features in super_banners, consider funding a development milestone with the Flutter Bounty Hunters.