SnackBar Widget in Flutter | How to add SnackBar in Flutter?

Properties

 

  • action
  • backgroundColor
  • padding
  • shape
  • behavior
  • width
  • margin
  • elevation
  • duration
  • animation
  • SnackBarThemeData.backgroundColor
  • ColorScheme.surface
  • clipBehavior
  • content
  • dismissDirection
  • onVisible
  • runtimelype

 

Example 1:

 

import 'package:flutter/material.dart';


void main() => runApp(DemoApp());


class DemoApp extends StatefulWidget {

  @override

  State<StatefulWidget> createState() {

    return DemoAppState();

  }

}


class DemoAppState extends State<DemoApp> {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        body: Builder(

          builder: (context) {

            return Center(

              child: ElevatedButton(

                onPressed: () {

                  const message = SnackBar(

                    content: Text("This is a snackbar."),

                  );

                  ScaffoldMessenger.of(context).showSnackBar(message);

                },

                child: const Text("click me"),

              ),

            );

          },

        ),

      ),

    );

  }

}

 

Example 2:

 

Builder(

          builder: (context) {

            return Center(

              child: ElevatedButton(

                onPressed: () {

                  final message = SnackBar(

                    content: const Text("This is a snackbar."),

                    action: SnackBarAction(

                      label: 'Done',

                      onPressed: () {},

                    ),

                  );

                  ScaffoldMessenger.of(context).showSnackBar(message);

                },

                child: const Text("click me"),

              ),

            );

          },

        ),

 

Example 3:

 

Builder(

          builder: (context) {

            return Center(

              child: ElevatedButton(

                onPressed: () {

                  final message = SnackBar(

                    content: const Text("This is a snackbar."),

                    backgroundColor: Colors.red,

                    action: SnackBarAction(

                      label: 'Done',

                      onPressed: () {},

                    ),

                  );

                  ScaffoldMessenger.of(context).showSnackBar(message);

                },

                child: const Text("click me"),

              ),

            );

          },

        ),

 

Example 4:

 

Builder(

          builder: (context) {

            return Center(

              child: ElevatedButton(

                onPressed: () {

                  final message = SnackBar(

                    content: const Text("This is a snackbar."),

                    backgroundColor: Colors.red,

                    padding: const EdgeInsets.all(50),

                    action: SnackBarAction(

                      label: 'Done',

                      onPressed: () {},

                    ),

                  );

                  ScaffoldMessenger.of(context).showSnackBar(message);

                },

                child: const Text("click me"),

              ),

            );

          },

        ),

 

Example 5:

 

Builder(

          builder: (context) {

            return Center(

              child: ElevatedButton(

                onPressed: () {

                  final message = SnackBar(

                    content: const Text("This is a snackbar."),

                    backgroundColor: Colors.red,

                    padding: const EdgeInsets.all(50),

                    duration: const Duration (seconds: 3),

                    action: SnackBarAction(

                      label: 'Done',

                      onPressed: () {},

                    ),

                  );

                  ScaffoldMessenger.of(context).showSnackBar(message);

                },

                child: const Text("click me"),

              ),

            );

          },

        ),

 

Video Link:

Post a Comment (0)
Previous Post Next Post