Flutter - Stack with Scaffold

Question

I'm currently using Scaffold with BottomNavigationBar in a project and need to display a separated widget on top of all that.

Tried to create a Stack on the build return and put this widget and the Scaffold as the children, but the widget is simply not displayed (not showed at all)! There isn't any error messages either.

What could be wrong? Or there is any other approach? (calling AlertDialog won't work for this purpose).

Defining the Stack on the body of the Scaffold didn't work also, as it need a list for the BottomNavigationBar.

    Widget build(BuildContext context) {
        var Test = Center(
          child: SizedBox(width: 100, height: 100,
          child: Container(
              color: Colors.blue,
              child: Text("Test"),),),);
      return Stack(
        alignment: Alignment.center,
        children: [
          Test,
          Scaffold(
            appBar: ..... (rest of the code)

HBS · Answer 1 · 2020-07-30T02:09:28.670

It is because your Scaffold is drawn over your Test widget. Stack takes multiple children and orders them from bottom to top. So the first item is the bottom-most and the last is the top-most. Try the following:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Scaffold(
            appBar: AppBar(title: Text('Hi')),
          ),
          TestWidget(),
        ],
      ),
    );
  }
}

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.blue,
      child: Center(
        child: Text("Test"),
      ),
    );
  }
}

In deed, the Stack pile order was inverted, but inverting the widgets order was worked in this case. Thanks for point this out! — devgit, Jul 30 '20 at 11:34

devgit · Accepted Answer · 2020-08-02T12:02:55.620

As @HBS mentioned, the problem was caused by the Stack ordering, but the fixing can be achieved just by changing the Widget order:

Widget build(BuildContext context) {
    var Test = Center(
      child: SizedBox(width: 100, height: 100,
      child: Container(
          color: Colors.blue,
          child: Text("Test"),),),);
  return Stack(
    alignment: Alignment.center,
    children: [
      Scaffold(
        appBar: ..... (rest of the code),
        Test,
        ],

Flutter - Stack with Scaffold

2 Answers2