How to change snackbar position in flutter

To change the position of a Snackbar in Flutter, you can use the ScaffoldMessenger widget along with the ScaffoldFeatureController’s setPosition function. Below is an example of how you can accomplish this:

      
        import 'package:flutter/material.dart';
        
        void main() {
          runApp(MyApp());
        }
        
        class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              home: Scaffold(
                appBar: AppBar(
                  title: Text('Change Snackbar Position'),
                ),
                body: Center(
                  child: ElevatedButton(
                    child: Text('Show Snackbar'),
                    onPressed: () {
                      final snackBar = SnackBar(content: Text('This is a Snackbar'));
                      ScaffoldMessenger.of(context).showSnackBar(snackBar)
                          .closed.then((SnackBarClosedReason reason) {
                        if (reason == SnackBarClosedReason.action) {
                          // Snackbar dismissed by tapping on action
                          print('Snackbar dismissed by action');
                        } else {
                          //Snackbar dismissed by swiping
                          print('Snackbar dismissed by swipe');
                        }
                      });
                    },
                  ),
                ),
              ),
            );
          }
        }
      
    

In the above example, we first import the necessary packages and create a Flutter app with a Scaffold as the home widget. Inside the Scaffold, we have an AppBar and a Centered ElevatedButton.

When the button is pressed, a Snackbar is shown using ScaffoldMessenger’s showSnackBar function. We can then handle events when the Snackbar is dismissed by tapping on the action or swiping it away.

To change the position of the Snackbar, you can use the setPosition function provided by ScaffoldFeatureController. This function takes in a SnackBar and the position (from the bottom or top) as arguments. By default, the position is set to the bottom.

Here’s an example of how you can change the position to top:

      
        final snackBar = SnackBar(content: Text('This is a Snackbar'));
        ScaffoldMessenger.of(context).showSnackBar(snackBar)
            .closed.then((SnackBarClosedReason reason) {
          if (reason == SnackBarClosedReason.action) {
            print('Snackbar dismissed by action');
          } else {
            print('Snackbar dismissed by swipe');
          }
        });
        
        // Change Snackbar position to top
        ScaffoldMessenger.of(context).showSnackBar(snackBar)
            .closed.then((SnackBarClosedReason reason) =>
            ScaffoldMessenger.of(context).removeCurrentSnackBar())
            .then((_) =>
            ScaffoldMessenger.of(context).showSnackBar(snackBar)
            .closed.then((SnackBarClosedReason reason) => null));