CODEWITHSUNDEEP
flutterdartdrawer
Mohammad Mirshahbazi
Mohammad Mirshahbazi

Reputation: 923

How can align the avatar image in the center, when use UserAccountsDrawerHeader in flutter?

When i want to use UserAccountsDrawerHeader in flutter endDrawer, how can set all of the avatar image and accountEmail and accountName align in center of drawer, in my code every thing align in left ?

this is my code:

endDrawer: Drawer(
            child: BackdropFilter(
              filter: ImageFilter.blur(
                sigmaX: 1.8,
                sigmaY: 1.8,
              ),
              child: Column(
                children: <Widget>[
              Center( child:
              UserAccountsDrawerHeader(
                accountEmail: Text(
                user.email ?? "user Email",
                style: TextStyle(
                    color: Theme
                        .of(context)
                        .colorScheme
                        .onPrimary),
              ),
              accountName: Text(
                user.fullName ?? user.username ?? "user Name",
                style: TextStyle(
                    color: Theme
                        .of(context)
                        .colorScheme
                        .onPrimary),
              ),
              currentAccountPicture: GestureDetector(
                onTap: () {},
                child: Container(
                    child: InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => ProfileScreen(
                              user: user,
                            ),
                          ),
                        );
                      },

i use Center widget but it's not work.

Upvotes: 2

Views: 3830

Answers (1)

Jhakiz
Jhakiz

Reputation: 1609

mam_65 Try to wrap them in Row:

...    
child: UserAccountsDrawerHeader(
       accountEmail: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        user.email ?? "user Email",
                        style: TextStyle(
                            color: Theme.of(context).colorScheme.onPrimary),
                      ),
                    ],
                  ),
        accountName: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        user.fullName ?? user.username ?? "user Name",
                        style: TextStyle(
                            color: Theme.of(context).colorScheme.onPrimary),
                      ),
                    ],
                  ),
...

NOTE: No way to center the currentAccountPicture because is wrapped in a Row with otherAccountsPictures (max 3 widgets). To do this you've to customize a Drawer yourself.

Upvotes: 2

Related Questions