Sachin Saini
Β Β·Β FlutterFlow Expert

Flutter Toast Notification [Custom Code]

πŸš€ Enhance Your FlutterFlow App's UI/UX with Toast Notifications! 🎨

If you're aiming to elevate the user experience of your FlutterFlow app, incorporating Toast Notifications is a fantastic way to go! πŸ“±βœ¨

Ready to take your app's UI/UX to the next level? Let's toast to an improved user experience! πŸ₯‚πŸš€

Step 1: Create a Custom Action: customToast

Step 2: Define the Arguments: (String) msg

Step 3: Add Dependencies: fluttertoast: ^8.2.4

Step 4: Copy And Paste the below code to Code Editor:

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/actions/actions.dart' as action_blocks;
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import '/custom_code/actions/index.dart';
import '/flutter_flow/custom_functions.dart'; //

import 'package:fluttertoast/fluttertoast.dart';

Future customToast(String msg) async {
  // Add your function code here!
  Fluttertoast.showToast(
    msg: msg,
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.CENTER,
    timeInSecForIosWeb: 3,
    backgroundColor: Color.fromARGB(255, 0, 0, 0),
    textColor: Colors.white,
    fontSize: 16.0,
  );
}

Step 5: Define the msg in the Action Block

That's All!

If you need any help in Integration you can Get help via 1:1 Session

16
15 replies