Flutter 更改 Drawer UserAccountsDrawerHeader 布局

Question

我正在构建我的第一个 flutter 应用程序，所以我的问题是：您可以更改 UserAccountsDrawerHeader 的个人资料图片的布局，例如下图我想将图像放在用户名的左侧

这是我的代码

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

Answer 1

您可以通过向 accountName 属性提供 Row Widget 来实现它，如下代码。

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

Flutter 更改 Drawer UserAccountsDrawerHeader 布局

Flutter change Drawer UserAccountsDrawerHeader layout

header

drawer

dart

flutter