Flutter :- Align a icon to the right bottom of a container - image

Question

I tried a column with an aligned icon but it didn't display correctly
If anyone has any idea to help. It would be greatly appreciated. Thank you
This is my code that i tried
List<Widget> temp = [];
listAirline.map((airline) {
listAirlineName.map((item) {
if (airline.name == item) {
temp.add(
Column(
children: <Widget>[
Container(
height: 20,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.elliptical(100.0, 60.0)),
),
child: Image.asset(
"images/Airlines/" + airline.id + ".jpg",
fit: BoxFit.fitWidth,
),
),
Align(
alignment: Alignment.bottomRight,
child: Icon(
Icons.remove_circle,
color: Colors.white,
),
)
],
),
);
}
}).toList();
}).toList();
return temp;
}```

Answer 1

You need to use the Stack widget for it, i have done similar task with the use of the Stack widget,please check thee below solution
class HomeScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _HomeScreen();
}
}
class _HomeScreen extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Home"),
),
body: Container(
height: 100.0,
child: Align(
alignment: Alignment.topCenter,
child: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 20.0),
height: MediaQuery.of(context).size.width*0.15,
width: MediaQuery.of(context).size.width*0.4,
child: Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.all(Radius.elliptical(20.0, 20.0)),
),
),
)
,
Positioned(
right: 5.0,
bottom: 0.0,
child:
Icon(
Icons.remove_circle,
color: Colors.red,
),
)
],
),
)));
}
}
And output of the above code is as follow