Search code examples
flutterdartheaderdrawer

Flutter change Drawer UserAccountsDrawerHeader layout


I am building my first flutter application, so my question is: Can you change the layout of the profile pic of the UserAccountsDrawerHeader, for example below image I want to put the image on the left side of the username

enter image description here

Here is my code

class SideMenu extends StatefulWidget {
  SideMenu({Key key}) : super(key: key);

  @override
  _SideMenuState createState() => _SideMenuState();
}

class _SideMenuState extends State<SideMenu> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          
          UserAccountsDrawerHeader(
            accountEmail: Text('@User'),
            accountName: Text('user'),
            currentAccountPicture: CircleAvatar(
              backgroundImage: AssetImage("assets/Images/profilePic.jpg"),
              
            ),
          ),

          ListTile(
            title: Text('hey'),
          )
        ],
       )
    );
  }
}

Solution

  • You can achieve it by providing Row Widget to accountName property as below code.

    UserAccountsDrawerHeader(
              accountEmail: Text(''), // keep blank text because email is required
              accountName: Row(
                children: <Widget>[
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(shape: BoxShape.circle),
                    child: CircleAvatar(
                      backgroundColor: Colors.redAccent,
                      child: Icon(
                        Icons.check,
                      ),
                    ),
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text('user'),
                      Text('@User'),
                    ],
                  ),
                ],
              ),
            ),