Question 75190 in Flutter Question posted in
The official Flutter documentation can be found here.

how to show snack bar on top of modal bottom sheet in flutter

When I use scaffoldmessenger to show snackbar it is shown behind the bottom sheet. When I wrap my bottom sheet with scaffold it is working fine .. but the bottom sheet is stretched for a full screen instead of showing at the bottom for a fixed height.. I know there are a lot of questions with same concept but nothing worked for me

 onPressed: () {
      showModalBottomSheet(
          isScrollControlled: true,
          context: context,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(25),
              topRight: Radius.circular(25),
            ),
          ),
          builder: (BuildContext context) {
            return Scaffold(
              body: Stack(children: [
                Positioned(
                  bottom: 0,
                  top: 0,
                  right: 0,
                  child: SingleChildScrollView(
                    child: AnimatedPadding(
                      padding: MediaQuery.of(context).viewInsets,
                      duration: const Duration(milliseconds: 100),
                      curve: Curves.decelerate,
                      child: AddContactSection(myUID: myUID),
                    ),
                  ),
                ),
              ]),
            );
          });
    },
Tags:

2

Answers


  1. 0

    Something like this, use _isBottomSheetVisible to determine whether to show the bottom sheet:

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ScaffoldMessengerState> _scaffoldKey =
      GlobalKey<ScaffoldMessengerState>();
  bool _isBottomSheetVisible = false;

  void _showSnackBar() {
    _scaffoldKey.currentState!.showSnackBar(SnackBar(
      content: Text('Hello, world!'),
    ));
  }

  void _toggleBottomSheet() {
    setState(() {
      _isBottomSheetVisible = !_isBottomSheetVisible;
    });
  }

  Widget _buildBottomSheet() {
    return SingleChildScrollView(
      child: AnimatedPadding(
        padding: MediaQuery.of(context).viewInsets,
        duration: const Duration(milliseconds: 100),
        curve: Curves.decelerate,
        child: Container(
          height: 200,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(25),
              topRight: Radius.circular(25),
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      key: _scaffoldKey,
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: _toggleBottomSheet,
                child: Text('Toggle Bottom Sheet'),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _showSnackBar,
          child: Icon(Icons.add),
        ),
        bottomSheet: _isBottomSheetVisible ? _buildBottomSheet() : null,
      ),
    );
  }
}

    Login or Signup to reply.
  2. 0

    Just add another Scaffold() to your Bottom Sheet and pass it to your new scaffold key

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search