flutterdartflutter-drawer

Image does not load on Flutter Draw Header


I'm new to flutter-dart and I've been trying to load a image to my draw header, so far unsuccessfully. Can anyone shed some light on it? Please find my code below.

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

My pubspec.yaml....

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

And folder structure...

folder structure


Solution

  • Your pubspec file looks good. I'm assuming you only want to include this single image as an asset.

    Try using this package, and replacing the DrawerHeader class with a ProgressiveImage component here. https://pub.dev/packages/progressive_image

    This package helps you to cache the image, to prevent having to reload it again, and it also adds a blur animation while it loads this asset.

    If you need to layer the drawer header (and add other information, such as an avatar icon, or email information), you can add this component into a Stack collection, then make sure that the ProgressiveImage is the first in the Stack

    If you also need to set a custom height to the drawer header, then make sure to wrap this Stack with a Container and manually set the height of this element