How to show Snackbar at the bottom of container and not screen flutter

Question

I have below screen to implement, The Problem I am having is that I don't know how to show the snackbar at the bottom of the container. It's showing snackbar at the bottom of the screen, but i want it like below:

Note : The Snackbar in the image is shown with text 'Whoray, Right Answer.'

Adding Code :

SingleChildScrollView(
      child: BlocBuilder<QuizControllerCubit, QuizControllerState>(
        builder: (context, state) {
          if (state is OnWrongAnswerGiven) {
            SnackBarCustomWidget.showSnackBar(
              context,
              SnackBarWidget.getSnackBar(context, state.message),
            );
          } else if (state is OnRightAnswerGiven) {
            SnackBarCustomWidget.showSnackBar(
              context,
              SnackBarWidget.getSnackBar(context, state.message),
            );
          }
          return SnackBarCustomWidget(
            child: Builder(
              builder: (context) => Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  QuizTitleWidget(title: question.name),
                  Container(
                    constraints: BoxConstraints(
                      minHeight: MediaQueryUtils(context).height * 0.5,
                      maxHeight: MediaQue

I don't see any Snackbar in the image you uploaded. Can you please elaborate? — Ravi Singh Lodhi, Dec 08 '20 at 08:18
@RaviSinghLodhi I have update the my anwer. Its shown with the text 'Whoray Right Answer.' — Jay Dangar, Dec 08 '20 at 08:29

Yadu · Answer 1 · 2020-12-09T11:20:13.897

0

let me give you a widget for that



class MySnackBarStack extends StatefulWidget {
  final Widget child;

  const MySnackBarStack({Key key, this.child}) : super(key: key);
  @override
  _MySnackBarStackState createState() => _MySnackBarStackState();

  static void showSnackBar(BuildContext context,SnackBar snackBar){
    context.findAncestorStateOfType<_MySnackBarStackState>()._showSnackBar(snackBar);
  }

  static void hideSnackBar(BuildContext context){
    context.findAncestorStateOfType<_MySnackBarStackState>()._hideSnackBar();
  }
}

class _MySnackBarStackState extends State<MySnackBarStack> {
  Widget snackBar = SizedBox();

  void _showSnackBar(SnackBar snackBar){
    setState(() {
      this.snackBar = snackBar;
    });
  }

  void _hideSnackBar(){
    setState(() {
      snackBar = SizedBox();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        widget.child,
        snackBar,
      ],
    );
  }
}

now Use it like this in any build method

//you cannot access MySnackBarStack here and up
MySnackBarStack(
    child: Builder(
      //you can only access MySnackBarStack here and down
      builder: (newContext){
        return MyContainer(
          onTap:(){
            MySnackBarStack.showSnackBar(newContext, snackBar);
          }
        );
      },
    ),
  )

edited Dec 09 '20 at 11:20

answered Dec 08 '20 at 08:49

Yadu

2,979
2
12
27

when calling showSnackBar it shows error stating that, MySnackBarStack was called on null. I have wrapped the widget I need to show in MySnackBarStack. – Jay Dangar Dec 09 '20 at 10:41
introduce a new `context` for the child of the `MySnackBarStack` with a `Builder`, EDIT the question with the updates – Yadu Dec 09 '20 at 10:56
can you upload a sample code with the usage? – Jay Dangar Dec 09 '20 at 11:04
I have changed the name to SnackBarCustomWidget – Jay Dangar Dec 09 '20 at 11:13
have updated the answer aswel, the error still exists? – Yadu Dec 09 '20 at 11:16
yeah i saw your code, you are accessing the MySnackBarStack with the wrong context, only context which is introduced after `MySnackBarStack` should be used, it is how flutter works!, and avoid calling show on build method!, only in some feedback functions like on button pressed, or onAnswerGiven – Yadu Dec 09 '20 at 11:21

How to show Snackbar at the bottom of container and not screen flutter

1 Answers1