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

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 the 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