Flutter change Drawer UserAccountsDrawerHeader layout

Question

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

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'),
                ],
              ),
            ],
          ),
        ),

Comments

[walid_salah]

Not exactly what i wanted, to clarify more here is a an exact image of what i want to have: imgur.com/a/PnYrApb

[Viren V Varasadiya]

check out now @walid_salah

[walid_salah]

thanks that's what i wanted, side question tho, the container of the image when i change the width it works, but changing the height doesn't do anything, so i end up with an oval shape like this : imgur.com/a/jX2JTib

[Viren V Varasadiya]

maximum height of accountname could be 56, so it will not increase more than that. if you want to check file:(user_accounts_drawer_header.dart - lineno: 211). where they set _kAccountDetailsHeight = 56. if you want to increase then you can increase over their.