-2

I'm trying to create a navigation drawer in my flutter app,however i want it to have a circle avatar image as icon instead of the default tree horizontal lines. Please is there a way to acheive this?? Any help is appreciated

3 Answers3

1
 leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              // icon: const Icon(Icons.access_alarm_rounded),
              icon: Container(
                child: Hero(
                  tag: 'Profile Picture',
                  child: CircleAvatar(
                    backgroundImage: NetworkImage(
                        'googleUserUrl'),
                  ),
                ),
              ),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            );
          },
        ),
סטנלי גרונן
  • 2,917
  • 23
  • 46
  • 68
0

You should first google how to achieve this, then try it out yourself. If you encounter errors that you can't resolve by yourself, then you should come here to ask questions.

I will provide you some links or post to help you.

First, follow this post to learn how to add image to your project. Then, this is the official documents for getting a circle avatar. Also, this is an already answered question about this issue

Dung Ngo
  • 1,258
  • 1
  • 11
  • 24
0

First of all, there are a lot of resources to help you this you may find out google to achieve this let me share some its up to you what image you want asset_Image or network_image then you use this image into appbar widget takes action_widget as an argument and then use popupmenuButton and then use clipoval

Example

actions: <Widget>[
              PopupMenuButton<String>(
                icon: Container(
                  child: ClipOval(
                    child: Align(
                      heightFactor: 1,
                      widthFactor: 1,
                      child: Image.network(googleUserUrl),
                    ),
                  )
                ),
MuhammadOmar
  • 518
  • 1
  • 4
  • 14