walid_salah
walid_salah

Reputation: 95

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

Upvotes: 2

Views: 14597

Answers (1)

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27217

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

Upvotes: 1

Related Questions