Cannot Stack the Image Behind the Scaffold Widget

Question

The UI I am trying to ImplementI want to add an image background. My app has bottomNavigatorBar property and the background doesn't go there. Just stuck at the body. I try to Stack two Scafflod but It doesn't work

    Stack(children: <Widget>[
      Scaffold(
              body: Image.asset('images/Opacity 80%.png',
        alignment: Alignment.bottomLeft,),
      ),Scaffold(
      extendBodyBehindAppBar: true,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(70.0),
        child: widget.pagenumber == 2
            ? InfoAppbar()
            : MyAppBar(_appBarlist[widget.pagenumber], controller, controller2),
      ),
      body: _children[widget.pagenumber],
      bottomNavigationBar: FancyBottomNavigation(
        initialSelection: widget.pagenumber,
        onTabChangedListener: onTapped,
        tabs: [
          TabData(
            iconData: Icons.gavel,
            title: 'Law',
          ),
          TabData(
            iconData: Icons.library_books,
            title: 'Handbook',
          ),
          TabData(iconData: Icons.info, title: 'Info'),
        ],
      ),
    ),
    ],);
  }

  void onTapped(int index) {
    setState(() {
      widget.pagenumber = index;
    });
  }}

You shouldn't have multiple `Scaffold` . [Read](https://stackoverflow.com/questions/60561552/multiple-scaffolds-for-each-page-inside-a-flutter-app) — dev-aentgs, Jun 25 '20 at 08:37
I just upload the UI that I am trying to implement. How can I achieve that? — Kaung Phyo Wai, Jun 25 '20 at 08:44
Check the `leading` and `actions` property of `AppBar` [reference](https://api.flutter.dev/flutter/material/AppBar-class.html) — dev-aentgs, Jun 25 '20 at 09:12

score 1 · Answer 1 · answered Jun 25 '20 at 08:49

Stack(children: <Widget>[
  Image.asset('images/Opacity 80%.png',)
  Scaffold(
  extendBodyBehindAppBar: true,
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(70.0),
    child: widget.pagenumber == 2
        ? InfoAppbar()
        : MyAppBar(_appBarlist[widget.pagenumber], controller, controller2),
  ),
  body: _children[widget.pagenumber],
  bottomNavigationBar: FancyBottomNavigation(
    initialSelection: widget.pagenumber,
    onTabChangedListener: onTapped,
    tabs: [
      TabData(
        iconData: Icons.gavel,
        title: 'Law',
      ),
      TabData(
        iconData: Icons.library_books,
        title: 'Handbook',
      ),
      TabData(iconData: Icons.info, title: 'Info'),
    ],
  ),
),
],);

}

This might solve your problem. Never use 2 scaffold

I tried that but the image still not appearing. I think The scaffold widget cover the image. When I remove the whole Scaffold Widget the image appear — Kaung Phyo Wai, Jun 25 '20 at 09:16
@KaungPhyoWai for setting background image try [this](https://stackoverflow.com/a/44183373/13625305) — dev-aentgs, Jun 25 '20 at 10:15

Cannot Stack the Image Behind the Scaffold Widget

1 Answers1