Top widget not appearing on Stack

Issue

I am currently doing a Flutter web project wherein I’m trying to replicate the UI of the Ubuntu desktop. Currently using this picture as a reference.

For the background image I used a container widget with an AssetImage widget as shown by the codeblock below.

class UbuntuBackground extends StatelessWidget {
  const UbuntuBackground({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/ubuntu.jpg'),
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

I made a toy Sidebar widget with a column widget containing 2 container widgets.

class AppSidebar extends StatelessWidget {
  const AppSidebar({Key? key}) : super(key: key);

  static Color sidebarColor = Color(0xff0D486E);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: sidebarColor,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: Colors.grey,
            ),
            child: SizedBox(
              height: 50,
              width: 50,
            ),
          ),
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: Colors.grey,
            ),
            child: SizedBox(
              height: 50,
              width: 50,
            ),
          ),
        ],
      ),
    );
  }
}

I then thought of using the Stack widget in order to have the AppSidebar show in front of the UbuntuBackground widget.

class UbuntuHomepage extends StatefulWidget {
  UbuntuHomepage({Key? key}) : super(key: key);

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

class _UbuntuHomepageState extends State<UbuntuHomepage> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AppSidebar(),
        UbuntuBackground(),
      ]
    );
  }
}

The UbuntuHomepage is also the app’s default route as specified in my main.dart file.

void main() {
  runApp(MyApp());
}

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

However, building the app will only show the UbuntuBackground widget as shown in the screenshot below.

With that, how can I overlay the AppSidebar widget over the UbuntuBackground widget?

Solution

The AppSidebar() is under the background, Instead, try like this,

return Stack(alignment: Alignment.centerLeft, children: <Widget>[
      UbuntuBackground(),
      AppSidebar(),
    ]);

In Stack, the last widget will be the top widget.

Answered By – Mohan Sai Manthri

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0