Getting type 'Null' is not a subtype of type 'BuildContext' while trying to push data from one flutter screen to another

Question

Here's widget.dart

Widget wallpapersList({required List<WallpaperModel> wallpapers, context}) {
  return Container(
    padding: EdgeInsets.symmetric(horizontal: 16),
    child: GridView.count(
      shrinkWrap: true,
      physics: ClampingScrollPhysics(),
      crossAxisCount: 2,
      childAspectRatio: 0.6,
      mainAxisSpacing: 6.0,
      crossAxisSpacing: 6.0,
      children: wallpapers.map((wallpaper) {
        return GridTile(
            child: GestureDetector(
          onTap: () {
            print(wallpaper.src!.portrait); // printing successfully
            Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ImageView(wallpaper.src!.portrait),
                ));
          },
          child: Hero(
            tag: wallpaper.src?.portrait ??
                "https://www.pexels.com/photo/brown-grass-field-near-body-of-water-under-white-clouds-14491698/",
            child: Container(
              child: ClipRRect(
                borderRadius: BorderRadius.circular(16),
                child: Image.network(
                  wallpaper.src?.portrait ??
                      "https://www.pexels.com/photo/brown-grass-field-near-body-of-water-under-white-clouds-14491698/",
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ));
      }).toList(),
    ),
  );
}

Here's image_view.dart

class ImageView extends StatefulWidget {
  String imgUrl;
  ImageView(this.imgUrl);

  @override
  State<ImageView> createState() => _ImageViewState();
}

class _ImageViewState extends State<ImageView> {
  @override
  Widget build(BuildContext context) {
    print(widget.imgUrl);
    return Scaffold(
      body: Stack(
        children: [
          Hero(
            tag: widget.imgUrl,
            child: Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: Image.network(
                  widget.imgUrl,
                  fit: BoxFit.cover,
                )),
          ),
          Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [Color(0x36FFFFFF), Color(0x0FFFFFFF)])),
            child: Column(children: [Text("Download backpaper")]),
          ),
          Text(
            "Back",
            style: TextStyle(color: Colors.white),
          )
        ],
      ),
    );
  }
}

Getting this error:

════════ Exception caught by gesture ═══════════════════════════════════════════
type 'Null' is not a subtype of type 'BuildContext'
════════════════════════════════════════════════════════════════════════════════

I searched the web & it mentioned that the value we are trying to push to another screen might be null but that's not the case here. What could be causing this error?

Answer 1

It must mean that you are calling wallpapersList without giving it a context.

Note that the signature is

wallpapersList({required List<WallpaperModel> wallpapers, context})

I strongly suggest to change it to

wallpapersList({required List<WallpaperModel> wallpapers, required BuildContext context})

Giving it an explicit type and also making it required. It would probably then point you exactly to the spot where you are using it without context.

This context must be given because it's the context used here:

Navigator.push(
            context,

The error you are having is about this context being null, which is the context parameter of wallpapersList