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.

Saritasarkaria

docs.flutter.io/flutter/widgets/Stack-class.html – Wiesbaden

Answer 1

@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: (){}),
    )
  ],
  ),
);
}

Photoperiod

Answer 2

You can use the Stack widget.

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

Keyte

The correct Stack class URL: api.flutter.dev/flutter/widgets/Stack-class.html – Sterner

Answer 3

             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: () {},
                      ),
                    ),
                  )
                ],
              ),

Seta

Answer 4

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
  ],
)

Impose

Answer 5

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

Proscribe