How can I put a widget above another widget in Flutter?

Question

I would like to overlay a Round view on top of a background View just like in this screenshot below.

Answer 1

solution 1

can use be_widgets for overlaying widget as label or badge. It is similar to stack but has very flexible and badge or label draw over the child widget which helps to ignore the size of overlaying widget.

solution 2

You can use assorted_layout_widgets and use RowSuper or ColumnSuper internal spacing (innerDistance) in negative value for overlay

Answer 2

You can use the Stack widget.

Stack(
  children: [
    /*your_widget_1*/,
    /*your_widget_2*/,
  ],
);

Answer 3

You can also use IndexedStack if you wish to show only one of the children based on the index.

IndexedStack(
  index: 0,
  children: [
    FooWidget(), // Visible if index = 0
    BarWidget(), // Visible if index = 1
  ],
)

Answer 4

             Stack(
                alignment: Alignment.topRight,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ClipRRect(
                      child: Image.network(
                        image,
                        height: 150,
                        width: 100,
                        fit: BoxFit.fitHeight,
                      ),
                      borderRadius: new BorderRadius.circular(8.0),
                    ),
                  ),
                  new Align(alignment: Alignment.topRight,
                    child:ClipRRect(
                      borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(30),
                          bottomLeft: Radius.circular(30),
                          topRight: Radius.circular(30)),
                      child: RaisedButton(
                        elevation: 1,
                        color: Color(0xFF69C86C),
                        child: Text(
                          "Name",
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: () {},
                      ),
                    ),
                  )
                ],
              ),

Answer 5

@override
Widget build(BuildContext context) {
// TODO: implement build
return new Container(
  width: 150.0,
  height: 150.0,
  child: new Stack(children: <Widget>[
    new Container(
      alignment: Alignment.center,
      color: Colors.redAccent,
      child: Text('Hello'),
    ),
    new Align(alignment: Alignment.bottomRight,
      child: FloatingActionButton(
        child: new Icon(Icons.add),
          onPressed: (){}),
    )
  ],
  ),
);
}