Flutter rounded profile image appBar

Question

I'm currently new to Flutter and Dart language and I'm trying to set a profile image to my leading attribute of my appBar.

So far I've got my image to be rounded, but I can't make it smaller nor put a margin to the left side.

Here's a snippet of my code:

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: new AppBar(
          title: new Text("Activities"),
          leading: new Container(
            padding: new EdgeInsets.all(15.0),
            width: 10.0,
            height: 10.0,
            decoration: new BoxDecoration(
              color: const Color(0xff7c94b6),
              borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
              border: new Border.all(
                color: Colors.white,
                width: 1.0,
              ),
            ),
          ),
          actions: <Widget>[
            new IconButton(
              icon: new Icon(Icons.refresh),
              onPressed: () {
                print("Reloading...");
                setState(() {
                  _isLoading = true;
                });
                _FetchData();
              },
            )
          ],
        ),

// ...

And here's how it looks: Click here

As you can see, my image is way too big and there's no margin to the left side...

How can I make the image smaller and most importantly, make a left margin similar to the refresh button right's margin?

Any help would be appreciated, Have a good one.

Answer 1

Consider using Material combined with a shape: new CircleBorder() instead of manually creating a circle. Or a CircleAvatar if that fits your needs.

Then add a Padding to control the size and margin.

return new Scaffold(
  backgroundColor: Colors.blueGrey,
  appBar: new AppBar(
    title: new Text("Activities"),
    leading: new Padding(
      padding: const EdgeInsets.all(8.0),
      child: new Material(
        shape: new CircleBorder(),
      ),
    ),
  ),
);