flutter_styled_toast

A Styled Toast Flutter package. You can highly customize toast ever. Beautify toast with a series of animations and make toast more beautiful.

demo

Getting Started

dependencies:
  flutter_styled_toast: ^1.2.1
import 'package:flutter_styled_toast/flutter_styled_toast.dart';
StyledToast(
  textStyle: TextStyle(fontSize: 16.0, color: Colors.white),
  backgroundColor: Color(0x99000000),
  borderRadius: BorderRadius.circular(5.0),
  textPadding: EdgeInsets.symmetric(horizontal: 17.0, vertical: 10.0),
  toastAnimation: StyledToastAnimation.fade,
  reverseAnimation: StyledToastAnimation.fade,
  curve: Curves.fastOutSlowIn,
  reverseCurve: Curves.fastLinearToSlowEaseIn,
  dismissOtherOnShow: true,
  movingOnWindowChange: true,
  child: MaterialApp(
          title: appTitle,
          showPerformanceOverlay: showPerformance,
          home: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              return MyHomePage(
                title: appTitle,
                onSetting: onSettingCallback,
              );
            },
          ),
        ),
);
//general use
showToast("hello styled toast");

// Customize toast content widget
showToastWidget(Text('hello styled toast'));

🚀 Roadmap


DefaultToastWidget

FadeAnim

SlideFromTopAnim

SlideFromBottomAnim

SlideFromLeftAnim

SlideFromRightAnim

ScaleAnim

FadeScaleAnim

RotateAnim

FadeRotateAnim

ScaleRotateAnim

OnDismiss

CustomToastWidget

CustomFailToastWidget

CustomSuccessToastWidget

StyledToast param

propertydescription
childWidget (Not Null)(required)
textAlignTextAlign (default TextAlign.center)
textDirectionTextDirection (default TextDirection.ltr)
borderRadiusBorderRadius (BorderRadius.circular(5.0))
backgroundColorColor (default Color(0x99000000))
textPaddingEdgeInsetsGeometry (default EdgeInsets.symmetric(horizontal: 17.0,vertical: 8.0))
toastHorizontalMargindouble (default 50.0)
textStyleTextStyle (default TextStyle(fontSize: 16.0,fontWeight: FontWeight.normal,color: Colors.white))
shapeBorderShapeBorder (default RoundedRectangleBorder(borderRadius: borderRadius))
durationDuration (default 2.3s)
animDurationDuration (default 400 milliseconds, animDuration * 2 <= duration, conditions must be met for toast to display properly)
toastPositionsStyledToastPosition (default StyledToastPosition.bottom)
toastAnimationStyledToastAnimation (default StyledToastAnimation.fade)
reverseAnimationStyledToastAnimation
alignmentAlignmentGeometry (default Alignment.center)
axisAxis (default Axis.vertical)
startOffsetOffset
endOffsetOffset
reverseStartOffsetOffset
reverseEndOffsetOffset
curveCurve (default Curves.linear)
reverseCurveCurve (default Curves.linear)
dismissOtherOnShowbool (default true)
movingOnWindowChangebool (default true)
onDismissVoidCallback (Invoked when toast dismiss)

showToast param

propertydescription
msgString (Not Null)(required)
contextBuildContext (If you don't wrap app with StyledToast, context is required, otherwise, is not)
durationDuration (default 2.3s)
animDurationDuration (default 400 milliseconds, animDuration * 2 <= duration, conditions must be met for toast to display properly)
positionStyledToastPosition (default StyledToastPosition.bottom)
textStyleTextStyle (default TextStyle(fontSize: 16.0,fontWeight: FontWeight.normal,color: Colors.white))
textPaddingEdgeInsetsGeometry (default EdgeInsets.symmetric(horizontal: 17.0,vertical: 8.0))
backgroundColorColor (default Color(0x99000000))
borderRadiusBorderRadius (BorderRadius.circular(5.0))
shapeBorderShapeBorder (default RoundedRectangleBorder(borderRadius: borderRadius))
onDismissVoidCallback (Invoked when toast dismiss)
textDirectionTextDirection (default TextDirection.ltr)
dismissOtherOnShowbool (default true)
movingOnWindowChangebool (default true)
toastAnimationStyledToastAnimation (default StyledToastAnimation.fade)
reverseAnimationStyledToastAnimation
alignmentAlignmentGeometry (default Alignment.center)
axisAxis (default Axis.vertical)
startOffsetOffset
endOffsetOffset
reverseStartOffsetOffset
reverseEndOffsetOffset
textAlignTextAlign (default TextAlign.center)
curveCurve (default Curves.linear)
reverseCurveCurve (default Curves.linear)

showToastWidget param

propertydescription
widgetWidget (Not Null)(required)
contextBuildContext (If you don't wrap app with StyledToast, context is required, otherwise, is not)
durationDuration (default 2.3s)
animDurationDuration (default 400 milliseconds, animDuration * 2 <= duration, conditions must be met for toast to display properly)
onDismissVoidCallback (Invoked when toast dismiss)
dismissOtherOnShowbool (default true)
movingOnWindowChangebool (default true)
textDirectionTextDirection (default TextDirection.ltr)
positionStyledToastPosition (default )
animationStyledToastAnimation (default StyledToastAnimation.fade)
reverseAnimationStyledToastAnimation
alignmentAlignmentGeometry (default Alignment.center)
axisAxis (default Axis.vertical)
startOffsetOffset
endOffsetOffset
reverseStartOffsetOffset
reverseEndOffsetOffset
curveCurve (default Curves.linear)
reverseCurveCurve (default Curves.linear)

Example

example

Thanks for

OkToast

Libraries

flutter_styled_toast

Dart

VM

dart:ffi
Foreign Function Interface for interoperability with the C programming language. [...]

Web

dart:html
HTML elements and other resources for web-based applications that need to interact with the browser and the DOM (Document Object Model). [...]
dart:js
Low-level support for interoperating with JavaScript. [...]
dart:js_util
Utility methods to efficiently manipulate typed JSInterop objects in cases where the name to call is not known at runtime. You should only use these methods when the same effect cannot be achieved with @JS annotations. These methods would be extension methods on JSObject if Dart supported extension methods.