SHIVANSHI VERMA
SHIVANSHI VERMA

Reputation: 17

How to display a snackBar in scaffold is body is composed of Stack?

I am trying to display a snack bar on my screen. But the snack bar is covering the whole screen instead of just being displayed at the bottom. Here is my code.

Scaffold(
      key: _scaffoldKey ,
      backgroundColor: Colors.pink,
      body: Stack(
      children: <Widget>[
      Text('Display Scaffold'), 
      Positioned(
        top: 110, 
         child: Container(
         child: FlatButton(
           onpressed: (){
             final snackBar =  SnackBar(duration: Duration(seconds: 4),
                            content: Center(child: Text('Welcome')),
                          ) ;
               _scaffoldKey.currentState.showSnackBar(snackBar);
}

),
),
),
 ),
);

Upvotes: 0

Views: 442

Answers (2)

jarekbutek
jarekbutek

Reputation: 615

Remove Center widget. This makes the widget as big as the parent allows.

If you need to center your text, just use textAlign: TextAlign.center property in Text widget.

Upvotes: 1

EPetit
EPetit

Reputation: 50

Have you try this ?

Scaffold.of(context).showSnackBar(snackBar);

instead of

_scaffoldKey.currentState.showSnackBar(snackBar);

It may be the solution.

I hope it could help you !

Upvotes: 0

Related Questions