⚡️A highly customizable, powerful and easy-to-use alerting library for Flutter.

Overview

Flash

⚡️ A highly customizable, powerful and easy-to-use alerting library for Flutter.

Website: https://sososdk.github.io/flash

Specs

pub

This library allows you to show messages or alerts in your app quickly and easily. It can be used as an alternative to Snackbar or Toast or Dialog and offers a plethora of useful features and customization options for you to play with.

It has been written 100% in Dart. ❤️

Table of Contents

Spread Some ❤️

GitHub followers

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flash: ^2.0.3+2

In your library add the following import:

import 'package:flash/flash.dart';

Sample Project

We have an exhaustive sample project demonstrating almost every feature of the library.

Usage

It is recommended to check the sample project to get a complete understanding of all the features offered by the library.

basic top bottom toast dialog

Contribution

I highly encourage the community to step forward and improve this library further. You can fix any reported bug, propose or implement new features, write tests, etc.

Here is a quick list of things to remember

  • Check the open issues before creating a new one,
  • Help me in reducing the number of open issues by fixing any existing bugs,
  • Check the roadmap to see if you can help in implementing any new feature,
  • You can contribute by writing unit and integration tests for this library,
  • If you have any new idea that aligns with the goal of this library, feel free to raise a feature request and discuss it.

License

Copyright 2019 sososdk

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • Unable to use before having navigator in context

    Unable to use before having navigator in context

    Hi @sososdk. Thanks for your work. I'm trying to use this lib to display no connection popup I need to place the Flash call before having navigator in context(i'm using auto_route lib)

    MaterialApp.router(
            builder: (context, child) => Connection(child: child),
          )
    

    I cannot use custom Overlay because Flash fails by trying to call to navigator https://github.com/sososdk/flash/blob/master/lib/flash.dart#L94

    opened by vasilich6107 6
  • Null check operator used on a null value

    Null check operator used on a null value

    After updating to v1.5.2+1, I am now receiving this error when attempting to show any flash.

    {
        "timestamp": "2021-05-06T03:03:26.535",
        "type": "Critical",
        "class_name": "package:flash/flash.dart",
        "method_name": "FlashController.createAnimationController",
        "message": "Null check operator used on a null value",
        "error": "Null check operator used on a null value",
        "stack_trace": [
            "package:flash/flash.dart 138                                                                    FlashController.createAnimationController",
            "package:flash/flash.dart 100                                                                    new FlashController",
            "package:flash/flash.dart 23                                                                     showFlash",
            "dart:async/zone.dart 1378                                                                       _rootRunBinary",
            "dart:async/zone.dart 1272                                                                       _CustomZone.runBinary",
            "dart:async/future_impl.dart 169                                                                 _FutureListener.handleError",
            "dart:async/future_impl.dart 719                                                                 Future._propagateToListeners.handleError",
            "dart:async/future_impl.dart 740                                                                 Future._propagateToListeners",
            "dart:async/future_impl.dart 550                                                                 Future._completeError",
            "dart:async/future_impl.dart 606                                                                 Future._asyncCompleteError.<fn>",
            "dart:async/zone.dart 1354                                                                       _rootRun",
            "dart:async/zone.dart 1258                                                                       _CustomZone.run",
            "dart:async/zone.dart 1162                                                                       _CustomZone.runGuarded",
            "dart:async/zone.dart 1202                                                                       _CustomZone.bindCallbackGuarded.<fn>",
            "dart:async/schedule_microtask.dart 40                                                           _microtaskLoop",
            "dart:async/schedule_microtask.dart 49                                                           _startMicrotaskLoop"
        ]
    }
    

    Worked without any issue with 1.5.2 and previous releases. When stepping through, this line returns null:

    L91: final rootOverlay = Overlay.of(context, rootOverlay: true);

    So does this line:

    L95: overlay = Overlay.of(context);

    My assumption is because I have a singleton GlobalKey<NavigatorState> that I attach to the MaterialApp and I use for all flashes (via key.currentContext.

    opened by JagandeepBrar 5
  • StatusBar color

    StatusBar color

    on Android show flash warning changes statusBar color.

    https://user-images.githubusercontent.com/40034117/183340449-00fdf3fb-1c41-488b-8ab7-7b0d4cbc262b.mp4

    Is there any solution to fix this issue?

    opened by uujiguu 4
  • FocusScopeNode Error

    FocusScopeNode Error

    FocusScopeNode FocusScopeNode#ea86b(_FlashState Focus Scope [PRIMARY FOCUS])(context: FocusScope, PRIMARY FOCUS) must be a child of FocusScopeNode#6ff27(Navigator Scope)(context: FocusScope, focusedChildren: [FocusScopeNode#bac68(_ModalScopeState Focus Scope)]) to set it as first focus. 'package:flutter/src/widgets/focus_manager.dart': Failed assertion: line 1272 pos 12: 'scope.ancestors.contains(this)'

    opened by antoniopetricc 4
  • How can I show a flash on top of an alert dialog?

    How can I show a flash on top of an alert dialog?

    Currently the flash is shown behind the dialog

    import 'package:flash/flash.dart';
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: Home(),
        );
      }
    }
    
    class Home extends StatelessWidget {
      const Home({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: RaisedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (_) => AlertDialog(
                    content: RaisedButton(
                      onPressed: () {
                        showFlash(
                          context: context,
                          duration: Duration(seconds: 3),
                          persistent: true,
                          builder: (_, controller) {
                            return Flash(
                              controller: controller,
                              child: FlashBar(
                                message: Text('Hello Flash'),
                              ),
                            );
                          },
                        );
                      },
                      child: Text('Show Flash'),
                    ),
                  ),
                );
              },
              child: Text('Show Dialog'),
            ),
          ),
        );
      }
    }
    
    

    flash

    opened by CurrySenpai 3
  • Enhancement: Use peanut package and create a live demo using github pages

    Enhancement: Use peanut package and create a live demo using github pages

    Hi thanks for creating flash. Just a scope of enhancement. One can be able to view live on repo github page. You can mention the url in README.md. This help to try the sample without running the example manually.

    Let me know if you need PR.

    opened by apgapg 3
  • overlay can't be the root overlay when persistent is false

    overlay can't be the root overlay when persistent is false

    I'm calling the sample showTopFlash() inside my app and get following error:

    overlay can't be the root overlay when persistent is false
    'package:flash/flash.dart':
    Failed assertion: line 99 pos 14: 'overlay != rootOverlay'
    

    This is my simple code to reproduce:

    class _TestScreenState extends State<TestScreen> {
      int which = 0;
    
      @override
      Widget build(BuildContext context) {
        GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
        FlashHelper.init(context);
        return Scaffold(
          key: _key,
          body: Center(child: FlatButton(onPressed: (){
            _showTopFlash();
          }, child: Text('show Flash')),),
        );
      }
      void _showTopFlash({FlashStyle style = FlashStyle.floating}) {
        showFlash(
          context: context,
          duration: const Duration(seconds: 5),
          persistent: false,
          builder: (_, controller) {
            return Flash(
              controller: controller,
              backgroundColor: Colors.white,
              brightness: Brightness.light,
              boxShadows: [BoxShadow(blurRadius: 4)],
              barrierBlur: 3.0,
              barrierColor: Colors.black38,
              barrierDismissible: true,
              style: style,
              position: FlashPosition.bottom,
              child: FlashBar(
                title: Text('Title'),
                message: Text('Hello world!'),
                showProgressIndicator: true,
                primaryAction: FlatButton(
                  onPressed: () => controller.dismiss(),
                  child: Text('DISMISS', style: TextStyle(color: Colors.amber)),
                ),
              ),
            );
          },
        );
      }
    
    }
    

    When I set the persistent:true it works without Blur effect. Thanks for your nice lib.

    question 
    opened by alizera 3
  •  Error: No named parameter with the name 'foregroundColor'

    Error: No named parameter with the name 'foregroundColor'

    [+7199 ms] [+7168 ms] ../Development/flutter/.pub-cache/hosted/pub.dartlang.org/flash-2.0.5/lib/src/flash_helper.dart:337:45: Error: No named parameter with the name 'foregroundColor'. [ +2 ms] [ +8 ms] style: TextButton.styleFrom(foregroundColor: $actionColor), [ ] [ ] ^^^^^^^^^^^^^^^ [ ] [ ] ../Development/flutter/packages/flutter/lib/src/material/text_button.dart:145:22: Context: Found this candidate, but the arguments don't match. [ ] [ ] static ButtonStyle styleFrom({ [ ] [ ] ^^^^^^^^^ [ ] [ +1 ms] ../Development/flutter/.pub-cache/hosted/pub.dartlang.org/flash-2.0.5/lib/src/flash_helper.dart:555:45: Error: No named parameter with the name 'foregroundColor'. [ ] [ ] style: TextButton.styleFrom(foregroundColor: $actionColor), [ ] [ ] ^^^^^^^^^^^^^^^ [ ] [ ] ../Development/flutter/packages/flutter/lib/src/material/text_button.dart:145:22: Context: Found this candidate, but the arguments don't match. [ ] [ ] static ButtonStyle styleFrom({

    Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.10.5, on macOS 12.6 21G115 darwin-arm, locale en-IN) [✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) [✓] Xcode - develop for iOS and macOS (Xcode 14.0.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.2) [✓] VS Code (version 1.71.2) [✓] Connected device (2 available) [✓] HTTP Host Availability

    **iOS & Android not working. Not able to run or build.

    Commenting out the plugin code is working. Please look into this.**

    opened by krishna700 2
  • Setting FlashTheme ignores fontStyle, fontSize, fontWeight of contentStyle

    Setting FlashTheme ignores fontStyle, fontSize, fontWeight of contentStyle

    When I set a FlashTheme I expect it to be applied to the FlashBars down the widget tree.

    But when I set the contentStyle, only the color is respected. Other attributes like fontStyle, fontSize and fontWeight are ignored.

    See the following example:

    class FlashTest extends StatelessWidget {
      const FlashTest({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return FlashTheme(
          flashBarTheme: const FlashBarThemeData(
            contentStyle: TextStyle(
              color: Colors.green,
              fontStyle: FontStyle.italic,
              fontSize: 8,
              fontWeight: FontWeight.bold,
            ),
          ),
          child: Builder(
            builder: (context) {
              return TextButton(
                child: const Text('show flashbar'),
                onPressed: () => context.showFlashBar(
                  content: const Text('content'),
                ),
              );
            },
          ),
        );
      }
    }
    

    This produces the following FlashBar. As you can see, only the green color is set: WhatsApp Image 2022-07-18 at 17 29 52

    However, when I set the same contentStyle directly in the showFlashBarmethod, it works as expected:

                onPressed: () => context.showFlashBar(
                  content: const Text('content'),
                  contentStyle: const TextStyle(
                    color: Colors.green,
                    fontStyle: FontStyle.italic,
                    fontSize: 8,
                    fontWeight: FontWeight.bold,
                  ),
                ),
    

    WhatsApp Image 2022-07-18 at 17 29 52 (1)

    Any idea?

    opened by tmaihoff 2
  • Bug: Android back button leaves dialog open

    Bug: Android back button leaves dialog open

    Load up the example app on Android. Go to the examples page and open any of the dialogs. Click the Android back button. The page navigates back, but the dialog is still open. The user can close it from there, but that's pretty awful UX.

    opened by AlexMcConnell 2
  • (showBlockDialog not dismissing) - Completer not completes when using it in Helper

    (showBlockDialog not dismissing) - Completer not completes when using it in Helper

    I have this class, and initiated the showBlockDialog functionality in model.

    PageLoader.dart

    import 'dart:async';
    
    import 'package:flash/flash.dart';
    import 'package:flutter/material.dart';
    
    class PageLoader {
      final _completer = Completer();
      final BuildContext context;
    
      PageLoader(this.context);
    
      void init() {
        context.showBlockDialog(dismissCompleter: _completer);
      }
    
      void complete() {
        _completer.complete();
        print("is completed");
      }
    }
    

    And using it like MyUI.dart

    try {
      PageLoader(context).init(); // init 
    
      await provider.login(
          emailController.text, passwordController.text, deviceName);
    
      PageLoader(context).complete(); // triggering to completer to complete the job to dismiss the dialog
    
      Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => VerificationPage(email: emailController.text)));
    } catch (exception) {
      setState(() {
        errorMessage = exception.toString().replaceAll('Exception: ', '');
      });
    
      PageLoader(context).complete();  // triggering to completer to complete the job to dismiss the dialog
    

    While respective actions, the showBlockDialog is displaying, but the complete is not completing.

    opened by anburocky3 2
  • UIFreeze: Tried to remove a willPop callback from a route that is not currently in the tree.

    UIFreeze: Tried to remove a willPop callback from a route that is not currently in the tree.

    I noticed that, after i call this:

    context.showSuccessBar(content: Text('Authentication verified!'));
    

    It is displaying properly on the UI, but on the log, i can see this trace. And during that, my UI is freezen, i have to restart my app to use my app. Why is that?

    ======== Exception caught by animation library =====================================================
    The following assertion was thrown while notifying status listeners for AnimationController:
    Tried to remove a willPop callback from a route that is not currently in the tree.
    'package:flutter/src/widgets/routes.dart':
    Failed assertion: line 1508 pos 12: '_scopeKey.currentState != null'
    
    When the exception was thrown, this was the stack: 
    #2      ModalRoute.removeScopedWillPopCallback (package:flutter/src/widgets/routes.dart:1508:12)
    #3      FlashController.dismissInternal (package:flash/flash.dart:224:35)
    #4      FlashController.dispose (package:flash/flash.dart:244:5)
    #5      FlashController._handleStatusChanged (package:flash/flash.dart:159:9)
    #6      AnimationLocalStatusListenersMixin.notifyStatusListeners (package:flutter/src/animation/listener_helpers.dart:233:19)
    #7      AnimationController._checkStatusChanged (package:flutter/src/animation/animation_controller.dart:815:7)
    #8      AnimationController._tick (package:flutter/src/animation/animation_controller.dart:831:5)
    #9      Ticker._tick (package:flutter/src/scheduler/ticker.dart:238:12)
    #10     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1146:15)
    #11     SchedulerBinding.handleBeginFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:1059:11)
    #12     _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:614:13)
    #13     SchedulerBinding.handleBeginFrame (package:flutter/src/scheduler/binding.dart:1057:17)
    #14     SchedulerBinding._handleBeginFrame (package:flutter/src/scheduler/binding.dart:976:5)
    #18     _invoke1 (dart:ui/hooks.dart:170:10)
    #19     PlatformDispatcher._beginFrame (dart:ui/platform_dispatcher.dart:286:5)
    #20     _beginFrame (dart:ui/hooks.dart:104:31)
    (elided 5 frames from class _AssertionError and dart:async)
    The AnimationController notifying status listeners was: AnimationController#a3606(⏮ 0.000; paused; for FlashController<dynamic>)
    
    opened by anburocky3 5
Add beautiful animated effects & builders in Flutter, via an easy, highly customizable unified API.

Flutter Animate A performant library that makes it simple to add almost any kind of animated effect in Flutter. Pre-built effects, like fade, scale, s

Grant Skinner 339 Nov 27, 2022
A Flutter slidable widget that provides an easy to use configuration. Highly customisable. Just as you want it!

A Flutter slidable widget that provides an easy to use configuration. Highly customisable. Just as you want it!

Ravi Kavaiya 88 Sep 26, 2022
Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Abdullah Chauhan 18 Dec 1, 2022
Create highly customizable, simple, and controllable autocomplete fields for Flutter.

Field Suggestion Installing Depend on it Add this to your package's pubspec.yaml file: dependencies: field_suggestion: <latest_version> Install it Y

Ismael Shakverdiev 21 Oct 18, 2022
A highly customizable Flutter widget to render and interact with JSON objects.

The spreadsheet with superpowers ✨ ! JSON Data Explorer A highly customizable widget to render and interact with JSON objects. Features Expand and col

rows 13 Oct 21, 2022
A highly customizable Flutter color picker.

FlexColorPicker FlexColorPicker is a customizable color picker for Flutter. The ColorPicker can show six different types of color pickers, three of wh

Rydmike 126 Nov 24, 2022
A highly customizable Flutter color picker.

FlexColorPicker FlexColorPicker is a customizable color picker for Flutter. The ColorPicker can show six different types of color pickers, three of wh

Rydmike 125 Nov 17, 2022
A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions

Snapping Sheet A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions Can adapt to scrolla

Adam Jonsson 365 Nov 24, 2022
The flutter_calendar_widget is highly customizable calendar widget.

flutter_calendar_widget The flutter_calendar_widget is highly customizable calendar widget. Not only can you change the style, but you can also change

dooboolab 4 Jun 24, 2022
A playable and customizable and easy-to-use toolbar made with flutter.

playable_toolbar_flutter Playable toolbar package is a beautiful animated menu(toolbar) which you can customize as much as you want. Installation Add

Mohammad Saleh 3 Aug 7, 2022
This library provides a customizable Flutter widget that makes it easy to display text in the middle of a Divider.

1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use TextDivider 1.2. Details 1.2.1. Customization Options 1.2.2. Horizontal

Kato Shinya 2 Feb 9, 2022
A flutter widget to indicate loading progress. Easy to use, easy to extend

?? ?? ?? A flutter widget to indicate loading progress. Easy to use, easy to extend

Manuel Duarte 2 May 30, 2022
Rules - Powerful and feature-rich validation library for both Dart and Flutter.

Introduction Rules - Powerful and feature-rich validation library for both Dart and Flutter. Rules is a simple yet powerful and feature-rich validatio

Ganesh Rathinavel 25 Sep 7, 2022
The lightweight and powerful wrapper library for Twitter Ads API written in Dart and Flutter 🐦

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Twitter.dart 2 Aug 26, 2022
A powerful official extension library of Tab/TabBar/TabView, which support to scroll ancestor or child Tabs when current is overscroll, and set scroll direction and cache extent.

extended_tabs Language: English | 中文简体 A powerful official extension library of Tab/TabBar/TabView, which support to scroll ancestor or child Tabs whe

FlutterCandies 181 Nov 30, 2022
A TabBarController that is easy to use for flutter developers. 🥰 It supports various styles of page navigation, and you can also use it to customize your favorite styles. 🍻🍻

easy_tab_controller A user-friendly TabBarController widget for flutter developer. Getting Started This project is a starting point for a Flutter plug

圆号本昊 3 May 26, 2022
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

GetWidget is a 100% free Flutter open-source UI Kit library built with Flutter SDK to make Flutter development easier and more joyful than ever. GetWi

Ionicfirebaseapp 3.6k Dec 1, 2022
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

GetWidget is a 100% free Flutter open-source UI Kit library built with Flutter SDK to make Flutter development easier and more joyful than ever. GetWi

Ionicfirebaseapp 3.6k Nov 29, 2022