图片无法在 Flutter Draw 上加载 Header

Question

我是 flutter-dart 的新手，我一直在尝试将图像加载到我的绘图 header 中，但迄今为止没有成功。任何人都可以阐明它吗？请在下面找到我的代码。

class MainDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
                //color: Theme.of(context).backgroundColor,
                image: DecorationImage(
              image: AssetImage('assets/images/title_fb_600.png'),
              fit: BoxFit.cover,
            )),
            child: Text("Some Text"),
            //ListTile(
            // leading: Icon(Icons.monetization_on),
            // title: Text(
            // "TRIPLE A",
            // style: TextStyle(color: Colors.white, fontSize: 20),
            //  ),
          ),
          ItemDrawer("Carteira Recomendada", Icons.star, 16),
          ItemDrawer("Carteira R$10", Icons.ten_k, 16),
          ItemDrawer("Minha Carteira", Icons.favorite, 16),
          ItemDrawer("Notícias", Icons.new_releases, 16),
          ItemDrawer("Minha Conta", Icons.account_circle, 16),
          ItemDrawer("Configurações", Icons.settings, 16),
        ],
      ),
    );
  }
}

我的pubspec.yaml.....

> flutter:
> 
uses-material-design: true
> 
assets:
>     - assets/images/title3a_fb_600.png

和文件夹结构...

folder structure

Answer 1

您的 pubspec 文件看起来不错。我假设您只想将这张图片作为资产包含在内。

尝试使用此包，并在此处将 DrawerHeader class 替换为 ProgressiveImage 组件。 https://pub.dev/packages/progressive_image

此包可帮助您缓存图像，以防止必须再次加载它，并且它还会在加载此资产时添加模糊动画。

如果您需要对抽屉进行分层header（并添加其他信息，例如头像图标或电子邮件信息），您可以将此组件添加到Stack collection，然后确保 ProgressiveImage 是 Stack

中的第一个

如果您还需要为抽屉设置自定义高度 header，请确保使用 Container[=] 包装此 Stack 28=] 并手动设置该元素的高度

图片无法在 Flutter Draw 上加载 Header

Image does not load on Flutter Draw Header

dart

flutter

flutter-drawer