Display a smart banner on top of the screen of your Flutter Web application.

Related tags

Templates dart flutter
Overview

Smart Banner

Pub Version

Display a smart banner on top of the screen of your Flutter Web application. Inspired by smart-app-banner and react-smartbanner

Try the online example

Usage

Wrap your view with a SmartBannerScaffold widget, if you want a persistant banner on top of your app you might need to directly use it inside the MaterialApp.builder property.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        if (child != null) {
          return SmartBannerScaffold(
            properties: BannerProperties(
              title: 'MyApp',
              buttonLabel: 'VIEW',
              androidProperties: BannerPropertiesAndroid(
                packageName: 'com.my.app',
                icon: Image.asset('assets/android_icon.png'),
              ),
              iosProperties: BannerPropertiesIOS(
                appId: '123456789',
                icon: Image.asset('assets/ios_icon.png'),
              ),
            ),
            child: child,
          );
        }
        return child;
      },
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

For a more complete example, see example.

Screenshots

Android Style iOS Style

You might also like...

Display images flutter - Simple app to display images in flutter

Display images flutter - Simple app to display images in flutter

Display Images In Flutter Simple app to display images in a flutter. In this dem

Jan 29, 2022

Presentation-Remote-PC - Manage your presentation from your smart phone - Phone Client

Presentation-Remote-PC - Manage your presentation from your smart phone - Phone Client

Presentation-Remote-PC Manage your presentation from your smart phone - Phone Cl

Jan 25, 2022

Flutter application for latest news by top newspapers . And allow for share articles with friends. Now available in night mode. Also landscape mode is available

Flutter application for latest news by top newspapers . And allow for share articles with friends. Now available in night mode. Also landscape mode is available

Breaking News Latest news for almost 55 country. Feature of saving article and search ariticles. Used API https://newsapi.org/ Note: if data is not ge

Oct 24, 2022

Basic todo mobile application built on top of the ETH blockchain with Flutter, Truffle and Ganache.

Basic todo mobile application built on top of the ETH blockchain with Flutter, Truffle and Ganache.

Todo-DAPP This project is a basic mobile Todo App build with Flutter. The backend consist in a Solidity contract running on the Ethereum Blockchain. C

Sep 28, 2022

(Top 10 GDG Devfest 2021) Mobile Application to prove intellectual property rights using blockchain technology and NFT

brainshield A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Jan 12, 2022

TraWell App - your Smart trawell buddy, Powered by AI

TraWell App - your Smart trawell buddy, Powered by AI

TraWell App your Smart trawell buddy, Powered by AI. View Demo · Report Bug · Request Feature About The Project TraWell comes with a cross platform mo

Dec 16, 2022

Flutter onboarding screen - An example of onboarding screen on Flutter

Flutter onboarding screen - An example of onboarding screen on Flutter

Flutter Onboarding Screen IntroViews is inspired by Paper Onboarding. Thanks to Fluttery. Future Development Pull requests and suggestions welcome. Lo

Aug 3, 2022

A Flutter plugin for changing the Home Screen, Lock Screen (or both) Wallpaper on Android devices.

A Flutter plugin for changing the Home Screen, Lock Screen (or both) Wallpaper on Android devices.

wallpaper_manager A Flutter plugin for changing the Home Screen, Lock Screen (or both) Wallpaper(s) on Android devices. Usage Installation In the pubs

Nov 28, 2022

Flutter screen adaptation, font adaptation, get screen information

Flutter screen adaptation, font adaptation, get screen information

flutter_screenutil A flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes! Note: This pl

Jan 6, 2023
Comments
  • Conditionally show SmartBanner

    Conditionally show SmartBanner

    If we had a boolean property for the SmartBannerScaffold like isShown, then we could only show it for kIsWeb and mobile browsers. Our code base support native mobile and web so we only need to show it on the web mobile browsers. What do you think of this idea? A workaround is to conditionally wrap SmartBannerScaffold but it is not very clean imo.

    enhancement 
    opened by aytunch 4
  • How to keep the SmartBanner on every route until closed?

    How to keep the SmartBanner on every route until closed?

    Hi @TesteurManiak thanks for this easy to use package. Once we wrap our MaterialApp's child with SmartBannerScaffold, we see the banner on our initial route. But when we push named routes, or modal pages, or other scaffolds, the banner disappears. Am I doing something wrong? I want the banner to be seen in my mobile web app until the user presses the close button.

    bug needs verification 
    opened by aytunch 2
  • Change background&text color and an optional seperator.

    Change background&text color and an optional seperator.

    Let's say I want the banner background color to be similar to my app's scaffold bg color. Now the color is fixed. I realize that changing the bg color also means the texts might not be visible on same color bg. So I am open to suggestions. Maybe textColor as well? :)

    Lastly, being able to optionally render a thin divider/separator at the top/bottom according to the position of the banner can be nice. What do you think?

    enhancement 
    opened by aytunch 2
Releases(0.2.2)
  • 0.2.2(Apr 2, 2023)

  • 0.2.0+1(Feb 23, 2023)

    • Added screenshots to the pubspec.yaml
    • Detect when the browser is running on MacOS to use the iOS style banner
    • Added the issue tracker and repository links to the pubspec.yaml

    Breaking changes

    • PlatformStyleExtension.isAndroid is now private (and PlatformStyleExtension.isIOS has been removed)
    • SmartBannerThemeData.adaptive constructor is now taking a BuildContext
    • BannerProperties.getPropertiesFromStyle is now taking a BuildContext as its first parameter
    Source code(tar.gz)
    Source code(zip)
Owner
Guillaume Roux
Flutter Software Engineer, co-organizer of Flutter Lyon
Guillaume Roux
Demo of web banner in Flutter

web_carousel How to implement a Web Banner the right way in Flutter. Screenshots Desk: Mobile: Medium Article Here is the Medium Article via the frien

Fred Grott 0 Mar 18, 2022
Smart home UI - A Flutter UI for Smart Home App

smart_home_app UI for Smart Home App Images

Aymen Ziouche 11 Dec 22, 2022
Cowin smart print - A GUI based CoWIN Certificate to Smart Card Converter

CoWIN Smart Print A GUI based CoWIN Certificate to Smart Card Converter. Feature

Shreyam Maity 2 Mar 9, 2022
Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Online doctor Consultation App UI in Flutter Doctor Consultation App UI in Flutter Visit Website Features State Management Navigation Bar Responsive D

Habib ullah 14 Jan 1, 2023
Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

Here is described test tasks for a android dev. Need to implement three screens:

null 3 Oct 4, 2022
Admob Flutter plugin that shows banner ads using native platform views.

Looking for Maintainers. Unfortunately I haven't been able to keep up with demand for features and improvments. If you are interested in helping maint

Kevin McGill 418 Dec 3, 2022
Plugin to integrate Facebook Native Banner Ad

flutter_fbaudience_network Plugin to integrate Facebook Native Ad to Flutter application Warning: The plugin is based on Flutter PlatformView (Android

Duy Duong 8 May 13, 2020
Aris fltrtuber - Flutter Web App to list top 30 YouTubers who create tutorial on Flutter

Fluttuber - Top 30 Flutter YouTubers Flutter Web App to list top 30 YouTubers wh

Behruz Hurramov 3 Jan 27, 2022
Flutter ticket pass - A Flutter Widget to display the details of a ticket/pass purchased by customers and display the details of the purchase

ticket_pass_package A Flutter package to display the purchase of a ticket/pass along with additional details such as list of buyers. The source code i

null 40 Aug 13, 2022