how to align icon to the top right corner of the Container

Question

How to achieve the following design in Flutter?

I wanted to implement

but I get this result

I have three Containers. Main container inside that two more container placed horizontally And I want to position Icon to the top right corner of the main Container.

Below is my code

  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(
        top: widget.index != 0 ? 18 : 0,
      ),
      child: Row(children: <Widget>[
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Container(
              width: 354,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.0),
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey,
                      offset: Offset(0.0, 1.0), //(x,y)
                      blurRadius: 3.0,
                    ),
                  ],
                  border: Border.all(
                    color: Colors.white,
                    width: 1,
                  )),
              padding: EdgeInsets.only(left: 3),
              child: Row(
                children: <Widget>[
                  Container(
                    height: 85.0,
                    width: 85.0,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12.0),
                      color: Colors.grey.shade50,
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Image(
                        image: AssetImage(
                            
             '${widget.restaurantListModelObj.restImage}'),
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 10.0,
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(10),
                        child: Row(
                          mainAxisAlignment: 
                   MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Text(
                              
               widget.restaurantListModelObj.restaurantName,'),
                            ),
                            Icon(Icons.bookmark_border_outlined,
                                color: Colors.orange, size: 17),// this 
        icon i wanted to top right corner of main container.
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(5.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Text(
                              widget.restaurantListModelObj.foodCategory,
                            ),
                            SizedBox(
                              width: 30,
                            ),
                            Text(
                              '${widget.restaurantListModelObj.distance} Km',
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(5.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Icon(Icons.star, color: Colors.orange, size: 17),
                            Text(
                              '${widget.restaurantListModelObj.restReview}',
                            ),
                            SizedBox(
                              width: 35,
                            ),
                            Icon(Icons.watch_later_outlined, size: 17),
                            Text(
                              '${widget.restaurantListModelObj.distanceFromLocation} Mins',
                            ),
                            SizedBox(
                              width: 35,
                            ),
                            Text(
                              widget.restaurantListModelObj.restStatus,
                            ),
                          ],
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
      ]),
    );
  }

I don't understand how to do this.

Answer 1

There are many ways to achieve this. I have done as follows. Design your items as per desired. I had only worked on layout placement.

Container(
          padding: EdgeInsets.all(10),
          height: 110,
          width: MediaQuery.of(context).size.width,
          child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10.0),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        offset: Offset(0.0, 1.0), //(x,y)
                        blurRadius: 3.0,
                      ),
                    ],
                    border: Border.all(
                      color: Colors.white,
                      width: 1,
                    )),
                padding: EdgeInsets.only(left: 3),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        height: 85.0,
                        width: 85.0,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(12.0),
                          color: Colors.grey.shade50,
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Image(
                            image: NetworkImage(
                              'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
                            ),

                            fit: BoxFit.contain,
//                         image: AssetImage(

//              '${widget.restaurantListModelObj.restImage}'),
//                       ),
                          ),
                        ),
//               ),
                      ),
                      SizedBox(
                        width: 10.0,
                      ),
                      Expanded(
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Row(
                                children: [
                                  Text("Restaurant Name",
                                      style: TextStyle(
                                        fontSize: 16,
                                        fontWeight: FontWeight.bold,
                                      )),
                                ],
                              ),
                              SizedBox(height: 5),
                              Row(children: [
                                Text("Fast Food"),
                                SizedBox(width: 15),
                                Text("21 Km"),
                              ]),
                              SizedBox(height: 5),
                              Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Row(children: [
                                      Icon(Icons.star),
                                      SizedBox(width: 5),
                                      Text("4.3")
                                    ]),
                                    SizedBox(width: 5),
                                    Row(children: [
                                      Icon(Icons.timer),
                                      SizedBox(width: 5),
                                      Text("56 mins")
                                    ]),
                                    SizedBox(width: 5),
                                    Row(children: [
                                      Icon(Icons.calendar_today),
                                      SizedBox(width: 5),
                                      Text("OPen")
                                    ]),
                                  ])
                            ]),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Align(
                            alignment: Alignment.topRight,
                            child: Icon(Icons.bookmark, color: Colors.orange)),
                      )
                    ]),
              ))),

Answer 2

There are many ways for doing that. If you want to have full control over the exact location of your widget. wrap the container in a Stack widget. Then put your icon in another container, and put it in the same Stack widget.

Once you do that, you can control the exact location of your widget using the Align widget. Here's an example:

 Widget build(BuildContext context) {
return Container(
  margin: EdgeInsets.only(
    top: 18,
  ),
  child: Row(children: <Widget>[
    Stack(
      children: [
        Container(
          width: 354,
          height: 400,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              color: Colors.white,
              border: Border.all(
                color: Colors.grey,
                width: 1,
              )),
          padding: EdgeInsets.only(left: 3),
        ),
        Container(
          width: 354,
          height: 400,
          child: Align(
            alignment: Alignment(1, -1),
        //Alignment(1, -1) place the image at the top & far left. 
        //Alignment (0, 0) is the center of the container
        //You can change the value of x and y to any number between -1 and 1
            child: Icon(Icons.bookmark_border_outlined,
                color: Colors.orange, size: 17),
          ),
        ),
      ],
    ),
  ]),
);

}

Answer 3

Wrap restaurant name with Expended widget

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(
      child: Text(
        "Restaurant Name",
      ),
    ),
    Icon(Icons.bookmark_border_outlined),
  ],
);