+- 0Day Forums (https://0day.red)
+-- Forum: Coding (https://0day.red/Forum-Coding)
+--- Forum: Flutter & Dart (https://0day.red/Forum-Flutter-Dart)
+--- Thread: How can I put a widget above another widget in Flutter? (/Thread-How-can-I-put-a-widget-above-another-widget-in-Flutter)
How can I put a widget above another widget in Flutter? - duodenum350 - 07-21-2023
I would like to overlay a Round view on top of a background View just like in this screenshot below.
[![Getting like this][1]][1]
[1]:
RE: How can I put a widget above another widget in Flutter? - contingentshosgdhyh - 07-21-2023
@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][1]][1]
[1]:
RE: How can I put a widget above another widget in Flutter? - slade79670 - 07-21-2023
```
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: () {},
),
),
)
],
),
```
RE: How can I put a widget above another widget in Flutter? - Mrtuanvtca - 07-21-2023
You can also use `IndexedStack` if you wish to show only one of the children based on the index.
```dart
IndexedStack(
index: 0,
children: [
FooWidget(), // Visible if index = 0
BarWidget(), // Visible if index = 1
],
)
```
RE: How can I put a widget above another widget in Flutter? - klazinaxaljp - 07-21-2023
You can use the [Stack][1] widget.
Stack(
children: [
/*your_widget_1*/,
/*your_widget_2*/,
],
);
[1]:
[To see links please register here]