Flutter appbar left actions

Question

I am trying to align the Top AppBar Actions to the left but I failed

     Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          titleSpacing: 0.0,
          elevation: 5.0,
          backgroundColor: Color(0xff201F23),
          title: Icon(
            Icons.polymer,
            color: Colors.orange,
            size: 30.0,
          ),
          actions: <Widget>[
            Container(
                margin: EdgeInsets.fromLTRB(0, 8, 10, 8),
                child: CircleAvatar(
                  backgroundImage: ExactAssetImage('assets/Bronze.jpg'),
                ),
                decoration: new BoxDecoration(
                  border: new Border.all(
                    color: Colors.orange,
                    width: 1.0,
                  ),
                  borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
                )),
            Container(
              //margin: EdgeInsets.fromLTRB(0, 0, 130, 0),
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      child: Text(
                        'Ov3rControl',
                        style: TextStyle(fontSize: 12.0),
                      ),
                    ),
                    SizedBox(height: 4.0),
                    Row(
                      children: <Widget>[
                        Icon(
                          Icons.trip_origin,
                          color: Colors.orange,
                          size: 12.0,
                        ),
                        SizedBox(width: 4.0),
                        Text('1000', style: TextStyle(fontSize: 12.0))
                      ],
                    ),
                  ]),
            )
          ],
        ),
        drawer: Drawer());
  }

I want the items to be next to the Logo. how can I achieve that? I Tried putting left margin to the container but the design break when the name of the user gets bigger Also, I am new to flutter is there is any way to make this code better?

Answer 1

You can also use the leading property in the AppBar and pass your widget to it

leading: IconButton(
            icon: Icon(Icons.shopping_cart),
            tooltip: 'Open shopping cart',
            onPressed: () {
              // handle the press
            },
          ),

Answer 2

Is this what you are looking for?

Find the changes in the code below:

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      titleSpacing: 0.0,
      elevation: 5.0,
      backgroundColor: Color(0xff201F23),
      title: Row(
        children: <Widget>[
          Icon(
            Icons.polymer,
            color: Colors.orange,
            size: 30.0,
          ),
          SizedBox(width: 15,),
          Container(
              margin: EdgeInsets.fromLTRB(0, 8, 10, 8),
              child: CircleAvatar(
                backgroundImage: ExactAssetImage('assets/Bronze.jpg'),
              ),
              decoration: new BoxDecoration(
                border: new Border.all(
                  color: Colors.orange,
                  width: 1.0,
                ),
                borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
              )),
          Container(
            //margin: EdgeInsets.fromLTRB(0, 0, 130, 0),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    child: Text(
                      'Ov3rControl',
                      style: TextStyle(fontSize: 12.0),
                    ),
                  ),
                  SizedBox(height: 4.0),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Icon(
                        Icons.trip_origin,
                        color: Colors.orange,
                        size: 12.0,
                      ),
                      SizedBox(width: 4.0),
                      Text('1000', style: TextStyle(fontSize: 12.0))
                    ],
                  ),
                ]
            ),
          )
        ],
      ),
    ),
    drawer: Drawer()
  );
}