How to position these icons in Flutter?

I'm trying to re-create layout from Gmail, but I don't know how to position icons in my layout.

Here's an Image how I want these icons to look like:

Here's an image of what I already did in Flutter:

I want the icons to have a space between them and I'd like them to be at the same level of height as "McDonald Poland".

Is there anyone, who can help me?

Code:

import 'package:flutter/material.dart';

class GeneratedMailCouponScreen extends StatelessWidget {
  final String couponImage;

  GeneratedMailCouponScreen({Key key, @required this.couponImage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Icon(
                        Icons.arrow_back
                      )
                    ],
                  ),
                  Row(
                    children: [
                      Icon(
                        Icons.archive
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.delete
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.mail
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.more_vert
                      )
                    ],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Text('Voucher', style: TextStyle(color: Colors.black, fontSize: 18.0)),
                      SizedBox(width: 8.0),
                      Container(
                        color: Colors.grey[200],
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
                          child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 12.0),),
                        ),
                      )
                    ],
                  ),
                  Row(
                    children: [
                      Icon(
                        Icons.star_border
                      )
                    ],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Row(
                children: [
                  Container(
                    height: 45.0,
                    width: 45.0,
                    decoration: BoxDecoration(
                      color: Colors.blue[100],
                      shape: BoxShape.circle
                    ),
                    child: Center(
                      child: Text('M', style: TextStyle(fontSize: 20.0),),
                    )
                  ),
                  Row(
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Text('McDonalds Poland', style: TextStyle(color: Colors.black)),
                              SizedBox(width: 8.0),
                              Text('Wczoraj', style: TextStyle(color: Colors.grey))
                            ],
                          ),
                          Row(
                            children: [
                              Text('do mnie', style: TextStyle(color: Colors.grey)),
                              Icon(
                                Icons.expand_more
                              )
                            ],
                          )
                        ],
                      ),
                      Row(
                        children: [
                          Icon(
                            Icons.reply
                          ),
                          Icon(
                            Icons.more_vert
                          )
                        ],
                      )
                    ],
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

I have made some modifications to your code please check is it works for you

import 'package:flutter/material.dart';

class GeneratedMailCouponScreen extends StatelessWidget {
  final String couponImage;

      GeneratedMailCouponScreen({Key key, @required this.couponImage})
  : super(key: key);

  @override
  Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  body: SafeArea(
    child: Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [Icon(Icons.arrow_back)],
              ),
              Row(
                children: [
                  Icon(Icons.archive),
                  SizedBox(width: 5.0),
                  Icon(Icons.delete),
                  SizedBox(width: 5.0),
                  Icon(Icons.mail),
                  SizedBox(width: 5.0),
                  Icon(Icons.more_vert)
                ],
              )
            ],
          ),
          SizedBox(height: 16.0),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Text(
                    'Voucher',
                    style: TextStyle(color: Colors.black, fontSize: 18.0),
                  ),
                  SizedBox(width: 8.0),
                  Container(
                    color: Colors.grey[200],
                    child: Padding(
                      padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
                      child: Text(
                        'Odebrane',
                        style:
                            TextStyle(color: Colors.black, fontSize: 12.0),
                      ),
                    ),
                  )
                ],
              ),
              Row(
                children: [Icon(Icons.star_border)],
              )
            ],
          ),
          SizedBox(height: 16.0),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: 45.0,
                width: 45.0,
                decoration: BoxDecoration(
                    color: Colors.blue[100], shape: BoxShape.circle),
                child: Center(
                  child: Text(
                    'M',
                    style: TextStyle(fontSize: 20.0),
                  ),
                ),
              ),
              SizedBox(width: 10),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(
                        'McDonalds Poland',
                        style: TextStyle(color: Colors.black),
                      ),
                      SizedBox(width: 8.0),
                      Text(
                        'Wczoraj',
                        style: TextStyle(color: Colors.grey),
                      )
                    ],
                  ),
                  Row(
                    children: [
                      Text('do mnie',
                          style: TextStyle(color: Colors.grey)),
                      Icon(Icons.expand_more)
                    ],
                  )
                ],
              ),
              Spacer(flex: 1,),
              Row(
                children: [Icon(Icons.reply), Icon(Icons.more_vert)],
              )
            ],
          )
        ],
      ),
        ),
      ),
    );
  }
}

How to use Flutter Cupertino Icons?, How do I add icons to my appbar in flutter? Fortunately, Flutter uses the same principles for aligning widgets with Flex, Column, and Row. In addition, it supports absolute and fixed positioning with Stack . The following lesson will teach you how to position containers and build layouts in Flutter with direct comparisons to CSS Flexbox .


I made a some changes. Now these icons are same height as text height, I hope works for you

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [Icon(Icons.arrow_back)],
                  ),
                  Row(
                    children: [
                      Icon(Icons.archive),
                      SizedBox(width: 5.0),
                      Icon(Icons.delete),
                      SizedBox(width: 5.0),
                      Icon(Icons.mail),
                      SizedBox(width: 5.0),
                      Icon(Icons.more_vert)
                    ],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Text('Voucher',
                          style:
                              TextStyle(color: Colors.black, fontSize: 18.0)),
                      SizedBox(width: 8.0),
                      Container(
                        color: Colors.grey[200],
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
                          child: Text(
                            'Odebrane',
                            style:
                                TextStyle(color: Colors.black, fontSize: 12.0),
                          ),
                        ),
                      )
                    ],
                  ),
                  Row(
                    children: [Icon(Icons.star_border)],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Container(
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Container(
                        height: 45.0,
                        width: 45.0,
                        decoration: BoxDecoration(
                            color: Colors.blue[100], shape: BoxShape.circle),
                        child: Center(
                          child: Text(
                            'M',
                            style: TextStyle(fontSize: 20.0),
                          ),
                        )),
                    SizedBox(
                      width: 16,
                    ),
                    Expanded(
                      child: Container(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Container(
                                    child: Row(
                                      children: <Widget>[
                                        Text('McDonalds Poland',
                                            style:
                                                TextStyle(color: Colors.black)),
                                        SizedBox(width: 8.0),
                                        Text('Wczoraj',
                                            style:
                                                TextStyle(color: Colors.grey)),
                                      ],
                                    ),
                                  ),
                                  Container(
                                    child: Row(
                                      children: <Widget>[
                                        Icon(Icons.reply),
                                        Icon(Icons.more_vert)
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),
                            Container(
                              child: Row(
                                children: [
                                  Text('do mnie',
                                      style: TextStyle(color: Colors.grey)),
                                  Icon(Icons.expand_more)
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Playing with AppBar in Flutter - FlutterPub, Use the Positioned widget to position Flutter widgets in a Stack. This video is also subtitled Duration: 1:28 Posted: 12 Feb 2019 When working with images, you often need to overlay text or icons on them. Perhaps to show the name of the image, or an icon to favourite it. In Android, the trusted android:background xml attribute does the trick. In iOS, you can add an UIImageView to the bottom of your view hierarchy. But, how can you … Continue reading "How to overlay text and icon on an image in Flutter"


this is work! You have to put the 'M' Container inside the Row and put the icons inside a Container

return Scaffold(
      body: Container(
          padding: EdgeInsets.only(top: 50),
          child: new Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Row(
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.end,
                  children: [                    
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Container(
                        height: 45.0,
                        width: 45.0,
                        decoration: BoxDecoration(
                            color: Colors.blue[100], shape: BoxShape.circle),
                        child: Center(
                          child: Text(
                            'M',
                            style: TextStyle(fontSize: 20.0),
                          ),
                        )),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Text('McDonalds Poland',
                                    style: TextStyle(color: Colors.black)),
                                SizedBox(width: 8.0),
                                Text('Wczoraj',
                                    style: TextStyle(color: Colors.grey))
                              ],
                            ),
                            Row(
                              children: [
                                Text('do mnie',
                                    style: TextStyle(color: Colors.grey)),
                                Icon(Icons.expand_more)
                              ],
                            )
                          ],
                        ),                        
                      ],
                    ),
                    Container(
                          padding: EdgeInsets.only(top: 50),
                          child: Row(
                            children: [
                              Icon(Icons.reply),
                              Icon(Icons.more_vert)
                            ],
                          ),
                        )
                  ],
                )
              ])),
    );

Positioned (Flutter Widget of the Week), To use this class, make sure you set uses-material-design: true in your project's pubspec.yaml file in the flutter section. This ensures that the MaterialIcons font is​  Next, you need to specify the bottom button position, which is specified as a first button in the Stack. In you will be able to use the current value of the animation as a button bottom position.


Layouts in Flutter, Important: This codelab covers basic Flutter layout concepts using an MainAxisAlignment.start: Positions children near the beginning of the main axis. The following example displays the widget Icons.widget from the Material Icon library in  Icons are Flutter's first class citizen. Even right out of the box, you get access to all the official material icons from Google. Many times though, just these official icons are not enough. For example, if you want to show an icon of particular social media, you'll have to reach for other than the official icons.


Icons class - material library - Dart API, In the future, this mechanism might be extended to include variants for different Replace them with your desired assets respecting the recommended icon size  Use with the Icon class to show specific icons. Icons are identified by their name as listed below. To use this class, make sure you set uses-material-design: true in your project's pubspec.yaml file in the flutter section. This ensures that the MaterialIcons font is included in your application. This font is used to display the icons. For example:


Basic Flutter layout concepts, An app that displays one of a half dozen choices with an icon and a title. Try this app out by creating a new project with flutter create and replacing the contents  In Flutter, you can easily implement shared element transitions between routes (pages) using the Hero widget. Hero animations How to create two styles of Hero animations: The hero flies from one page to another while changing position and size.