'No Material widget found.'

Question

i created a listview in which i used the gero widget i have wrapped all the hero widgets and listview widgets in material but still I get this error and when i click the listtile it works properly but when I come to the second page I am not able to go back

homepage:

 body: Material(
        child: ListView(
          children: [
            Hero(
              tag: nyc_img,
              child: ListTile(
                leading: Image.network(
                  nyc_img,
                  height: 100,
                  width: 100,
                ),
                title: Text("New York City"),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => NYCpage()),
                  );
                },
              ),
            ),
          ],
        ),

second page:

body: Center(
        child: Material(
          type: MaterialType.transparency,
          child: Hero(
            tag: nyc_img,
            child: Image.network(nyc_img),
          ),
        ),
      ),

score 0 · Answer 1 · answered Apr 01 '23 at 14:18

0

Wrap your ListTile with Material widget to solve this.

return Scaffold(
  body: ListView(
    children: [
      Hero(
        tag: nyc_img,
        child: Material(
          child: ListTile(
            // leading: Image.network(
            //   nyc_img,
            //   height: 100,
            //   width: 100,
            // ),
            title: Text("New York City"),
            onTap: () {

answered Apr 01 '23 at 14:18

Md. Yeasin Sheikh

54,221
7
29
56

Glad to help, More about [hero-animations](https://docs.flutter.dev/development/ui/animations/hero-animations) – Md. Yeasin Sheikh Apr 02 '23 at 15:10

score 0 · Answer 2 · answered Apr 01 '23 at 17:02

You need to Wrap the child of your Hero widget in a Material as the animated part is getting called outside of Scaffold widget so you need to pass Material widget separately

Scaffold(
  body: ListView(
    children: [
      Hero(
        tag: nyc_img,
        child: Material(
          type: MaterialType.transparency,
          child: ListTile(
            leading: Image.network(
              nyc_img,
              height: 100,
              width: 100,
            ),
            title: Text("New York City"),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => NYCpage()),
              );
            },
          ),
        ),
      ),
    ],
  ),
);

for the Second page

 Scaffold( 
  body: Center(
    child: Hero(
      tag: nyc_img,
      child: Material(
        type: MaterialType.transparency,
        child: Image.network(nyc_img),
      ),
    ),
  ),
);

'No Material widget found.'

2 Answers2