skip to Main Content

This is my code to show thumbnail or food image in my homescreen. But i dont know why the image doesnt appear in my emulator and its showing _TypeError (Null check operator used on a null value) at the commented line.

import 'package:flutter/material.dart';
import '../Model/menus.dart';

class InfoDesignWidget extends StatefulWidget {
  //this class will receive
  Menus? model;
  BuildContext? context;

  InfoDesignWidget({this.model, this.context});

  @override
  State<InfoDesignWidget> createState() => _InfoDesignWidgetState();
}

class _InfoDesignWidgetState extends State<InfoDesignWidget> {
  String? thumbnailUrl;
  @override
  Widget build(BuildContext context) {
    return InkWell(
      splashColor: Colors.amber,
      child: Padding(
        padding: const EdgeInsets.all(1.0),
        child: Container(
          height: 235,
          width: MediaQuery.of(context).size.width,
          child: Column(
            children: [
              Divider(
                height: 2,
                thickness: 3,
                color: Colors.grey[300],
              ),
              //Merchant image
              Image.network(
                widget.model!.thumbnailUrl!, //here is the error message
                height: 200.0,
                width: MediaQuery.of(context).size.width * .97,
                fit: BoxFit.cover,
              ),
              const SizedBox(height: 2.0),
              //Merchant name
              Text(
                widget.model!.menuName!,
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 20,
                  fontWeight: FontWeight.w400,
                ),
              ),
              Divider(
                height: 2,
                thickness: 3,
                color: Colors.grey[300],
              ),
              Text(
                widget.model!.menuInfo!,
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 20,
                  fontWeight: FontWeight.w400,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I have tried many solution but still its there. I cant even remove the null check cuz its compulsory.

2

Answers


  1. Null assert is risky when we don’t check the in prior. You can do

    if(widget.model?.thumbnailUrl!=null)
     Image.network(..),
    

    Also you can use empty string as default

    Image.network(
      widget.model?.thumbnailUrl ?? "", // Provide a default empty string if null
      errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
        return Text("Your Image on Error");
      },
    )
    

    You can do the same for others; Not about this issue but use MediaQuery.sizeOf or layoutBuilder to get the size.

    Login or Signup to reply.
  2.           Image.network(
                widget.model!.thumbnailUrl!, //here is the error message
                height: 200.0,
                width: MediaQuery.of(context).size.width * .97,
                fit: BoxFit.cover,
              ),
    

    // Replace to this code

    Image.network(
    widget.model?.thumbnailUrl ?? "",
    height: 200.0,
    width: MediaQuery.of(context).size.width * .97,
    fit: BoxFit.cover,
    errorBuilder: (context, error, stackTrace) =>
    Icon(Icons.error),     // you can change any widget to handle error
    ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search