Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

Getting like this

like image 703
Shensheng Kuang Avatar asked Aug 24 '18 06:08

Shensheng Kuang


People also ask

How do I position widgets in Flutter?

Here's how you do it: Step 1: Wrap the Stack's child widget inside the Position widget. Step 2: Inside the Position widget, add the top , right , bottom , left property and give it a value. For example, setting top:15 and right:0 will position a widget on the top right of your screen with 15 px space from the top.


1 Answers

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

above UI will look like this

like image 145
Zulfiqar Avatar answered Sep 20 '22 22:09

Zulfiqar