FlutterToast

flobertoast

Bibliothèque de toast pour flotter

Maintenant, cette bibliothèque de toast prend en charge deux types de messages de toast l'un qui nécessite BuildContext un autre sans BuildContext

Toast sans contexte

Plates-formes prises en charge

• Androïde
• Ios
• Web (utilise Toastify-JS)

Celui-ci a des fonctionnalités limitées et aucun contrôle sur l'interface utilisateur

Toast qui nécessite BuildContext

Plates-formes prises en charge

• TOUS

1. Contrôle complet du toast
2. Les toasts seront en file d'attente
3. Supprimer un pain grillé
4. Effacer la file d'attente

Comment utiliser

 # add this line to your dependencies
fluttertoast : ^8.2.10 

 import 'package:fluttertoast/fluttertoast.dart' ;

Toast sans contexte de construction (Android et iOS)

 Fluttertoast . showToast (
        msg : "This is Center Short Toast" ,
        toastLength : Toast . LENGTH_SHORT ,
        gravity : ToastGravity . CENTER ,
        timeInSecForIosWeb : 1 ,
        backgroundColor : Colors .red,
        textColor : Colors .white,
        fontSize : 16.0
    );

propriété	description	défaut
msg	String (pas null) (obligatoire)	requis
toastlengle	Toast.length_short ou toast.length_long (facultatif)	Toast.length_short
pesanteur	Toastgravity.top (ou) toastgravity.center (ou) toastgravity.bottom (Web ne prend en charge que le haut, le bas)	Toastgravity.bottom
TimeInSecForiosweb	int (pour iOS & web)	1 (sec)
fond de fond	Couleurs.	nul
textère	Couleurs blanc	nul
s'adapter	16.0 (flotteur)	nul
fontasset	Chemin vers un fichier de police dans le dossier Flutter App Assets, par exemple 'Assets / Path / To / Some-Font.ttf' (String)	nul
webshowclose	Faux (bool)	FAUX
webgcolor	String (couleur hexiste)	Gradient linéaire (à droite, # 00B09B, # 96C93D)
webposition	Corde ( left , center ou right )	droite

Pour annuler tout l'appel des toasts

 Fluttertoast . cancel ()

Remarque Android

Le toast personnalisé ne fonctionnera pas sur Android 11 et plus, il n'utilisera que MSG et ToastLength restant toutes les propriétés sont ignorées

Toast personnalisé pour Android

Créez un fichier nommé toast_custom.xml dans votre dossier app/res/layout de projet et faites un style personnalisé

<? xml version = " 1.0 " encoding = " utf-8 " ?>
< FrameLayout xmlns : android = " http://schemas.android.com/apk/res/android "
    xmlns : tools = " http://schemas.android.com/tools "
    android : layout_width = " wrap_content "
    android : layout_height = " wrap_content "
    android : layout_gravity = " center_horizontal "
    android : layout_marginStart = " 50dp "
    android : background = " @drawable/corner "
    android : layout_marginEnd = " 50dp " >

    < TextView
        android : id = " @+id/text "
        android : layout_width = " wrap_content "
        android : layout_height = " wrap_content "
        android : background = " #CC000000 "
        android : paddingStart = " 16dp "
        android : paddingTop = " 10dp "
        android : paddingEnd = " 16dp "
        android : paddingBottom = " 10dp "
        android : textStyle = " bold "
        android : textColor = " #FFFFFF "
        tools : text = " Toast should be short. " />
</ FrameLayout >

Toast avec buildContext (toutes les plates-formes)

Mettez à jour votre MaterialApp avec builder comme ci-dessous pour l'utilisation du contexte Vérifiez la section Doc Utilisez NavigatorKey pour le contexte (pour accéder au contexte à l'échelle mondiale)

 MaterialApp (
    builder : FToastBuilder (),
    home : MyApp (),
    navigatorKey : navigatorKey,
),

 FToast fToast;

@override
void initState () {
    super . initState ();
    fToast = FToast ();
    // if you want to use context from globally instead of content we need to pass navigatorKey.currentContext!
    fToast. init (context);
}

_showToast () {
    Widget toast = Container (
        padding : const EdgeInsets . symmetric (horizontal : 24.0 , vertical : 12.0 ),
        decoration : BoxDecoration (
        borderRadius : BorderRadius . circular ( 25.0 ),
        color : Colors .greenAccent,
        ),
        child : Row (
        mainAxisSize : MainAxisSize .min,
        children : [
            Icon ( Icons .check),
            SizedBox (
            width : 12.0 ,
            ),
            Text ( "This is a Custom Toast" ),
        ],
        ),
    );


    fToast. showToast (
        child : toast,
        gravity : ToastGravity . BOTTOM ,
        toastDuration : Duration (seconds : 2 ),
    );

    // Custom Toast Position
    fToast. showToast (
        child : toast,
        toastDuration : Duration (seconds : 2 ),
        positionedToastBuilder : (context, child) {
          return Positioned (
            child : child,
            top : 16.0 ,
            left : 16.0 ,
          );
        });
}

Maintenant, appelez _showToast()

Pour plus de détails, vérifiez example de projet

propriété	description	défaut
enfant	Widget (pas nul) (requis)	requis
toastnduration	Durée (facultative)
pesanteur	Toastgravité. *
positiondoastbuilder	Positiondoastbuilder
délavide	Durée	Durée (millisecondes: 350)
ignorer	booléen	FAUX
isdissible	booléen	FAUX

Utilisez NavigatorKey pour le contexte (pour accéder au contexte à l'échelle mondiale)

Pour utiliser NavigatorKey pour le contexte, définissez d'abord le GlobalKey<NavigatorState> au plus haut niveau dans votre fichier main.dart

 GlobalKey < NavigatorState > navigatorKey = GlobalKey < NavigatorState >();

Au moment de l'initialisation du FToast nous devons utiliser le contexte à partir de GlobalKey<NavigatorState>

 FToast fToast = FToast ();
fToast. init (yourNavKey.currentContext ! );

Pour annuler tout l'appel des toasts

 // To remove present shwoing toast
fToast. removeCustomToast ()

// To clear the queue
fToast. removeQueuedCustomToasts ();

Images de prévisualisation (pas de buildContext)

Images de prévisualisation (buildContext)

Si vous avez besoin de fonctionnalités suggérées

...

Achetez-moi un café