UserAccountsDrawerHeader

提供类似于下图这样的效果,一般都用在侧边栏 Drawer 组件中:

UserAccountsDrawerHeader  - 图1

其中,accountNameaccountEmail 是必选项。

另外,头像区域使用 currentAccountPicture 进行指定;

背景区域使用 decoration 属性进行指定;

详细代码示例如下:

  1. UserAccountsDrawerHeader(
  2. accountName: Text('刘龙宾'),
  3. accountEmail: Text('liulongbin1314@outlook.com'),
  4. currentAccountPicture: CircleAvatar(
  5. backgroundImage: NetworkImage(
  6. 'https://images.gitee.com/uploads/91/465191_vsdeveloper.png'),
  7. ),
  8. decoration: BoxDecoration(
  9. // 设置背景图片
  10. image: DecorationImage(
  11. // 控制图片填充效果
  12. fit: BoxFit.fill,
  13. // 指定图片地址
  14. image: NetworkImage(
  15. 'http://www.liulongbin.top:3005/images/bg1.jpg'))),
  16. )