unexpected null value Flutter

flutter null dart-null-safety

9,309

There is something quite weird here. If you pay close attention you can see that the products list is inside the product class. It doesn't make sense to store all the products in the single product class. That causes the problem because in the BodyPage your referencing a null Products object in the build function. You can fix it by extracting the Products list out of the products class and then import it in the products body like that:

product.dart

class Products {
  final String name, discription;
  final String image;
  
  Products({ 
    required this.name, 
    required this.discription, 
    required this.image,
  });
}

List<Products> products = [
    Products(
        name: 'Gaine Plastic',
        discription:
            'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension ',
        image: 'assets/images/gainePlastic.png'),
    Products(
        name: 'Gaine Plastic',
        discription:
            'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension ',
        image: 'assets/images/port.png'),
    Products(
        name: 'Gaine Plastic',
        discription:
            'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension ',
        image: 'assets/images/Sheet.png'),
    Products(
        name: 'Gaine Plastic',
        discription:
            'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension ',
        image: 'assets/images/gainePlastic.png'),
    Products(
        name: 'Gaine Plastic',
        discription:
            'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension ',
        image: 'assets/images/gainePlastic.png'),
  ];

BodyPage (In the build method - dont forget to import products):

class BodyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     String image = products[0].image;
     String name = products[0].name;
     String desc = products[0].discription;
     ...
  }
  ...
}

9,309

Author by

Boukhames Karim

Updated on December 30, 2022

Comments

Boukhames Karim over 1 year

hey guys i m new in dart and flutter when i run the project i face an error that says unexpected null value i couldn't find where is the mistake, i think the problem is in Null Safety. I have three classes two of them are for screen and one is a modle,

    import 'package:enpc_site/screens/body_page.dart';
import 'package:enpc_site/screens/navigate_bar.dart';
import 'package:enpc_site/screens/our_services.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(150),
        child: AppBar(
          backgroundColor: Colors.black,
          flexibleSpace: NavigateBar(),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
              Color.fromARGB(255, 0, 0, 0),
              Color.fromARGB(255, 49, 8, 8)
            ])),
        height: double.infinity,
        child: Padding(
            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 100),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 200),
                    child: WhoWe(),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 200),
                    child: OurServices(), // here i'm calling my second screen class
                  )
                ],
              ),
            )),
      ),
    );
  }
}

the second class

import 'package:enpc_site/models/products.dart';
import 'package:flutter/material.dart';
class OurServices extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraint) {
        return BodyPage();
      },
    );
  }
}

class BodyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     Products? product;
     String image = product!.products[0].image;
     String name = product.products[0].name;
     String desc = product.products[0].discription;
    return Container(
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "SERVICES",
            style: TextStyle(fontSize: 25, color: Colors.white),
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            "CE QUE NOUS PRODUISON",
            style: TextStyle(
                fontSize: 40, fontWeight: FontWeight.bold, color: Colors.white),
          ),
          SizedBox(
            height: 40,
          ),
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
              child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 500,
                  width: 500,
                  decoration: BoxDecoration(
                    color: Color.fromARGB(100, 240, 240, 240),
                    borderRadius: BorderRadius.circular(10)
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(40),
                    
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Image.asset('$image' , width: 400, height: 300,),
                        Text(
                          '$name',
                          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
                        ),
                        RichText(
                            text: TextSpan(text: '$desc',
                            style: TextStyle(color: Colors.white, fontSize: 15), ),
                            
                          ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  width: 20,
                ),
                Container(
                  height: 500,
                  width: 500,
                  decoration: BoxDecoration(
                    color: Color.fromARGB(100, 240, 240, 240),
                    borderRadius: BorderRadius.circular(10)
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(40),
                    
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Image.asset('assets/images/port.png', width: 400, height: 300,),
                        Text(
                          'Gaine Plastic',
                          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
                        ),
                        RichText(
                            text: TextSpan(text: 'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension',
                            style: TextStyle(color: Colors.white, fontSize: 15), ),
                            
                          ),
                      ],
                    ),
                  ),
                ),
                SizedBox(
                  width: 20,
                ),
                Container(
                  height: 500,
                  width: 500,
                  decoration: BoxDecoration(
                    color: Color.fromARGB(100, 240, 240, 240),
                    borderRadius: BorderRadius.circular(10)
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(40),
                    
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Image.asset('assets/images/Sheet.png', width: 400, height: 300,),
                        Text(
                          'Gaine Plastic',
                          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
                        ),
                        RichText(
                            text: TextSpan(text: 'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension',
                            style: TextStyle(color: Colors.white, fontSize: 15), ),
                            
                          ),
                      ],
                    ),
                  ),
                ),
                SizedBox(width: 20,),
                Container(
                  height: 500,
                  width: 500,
                  decoration: BoxDecoration(
                    color: Color.fromARGB(100, 240, 240, 240),
                    borderRadius: BorderRadius.circular(10)
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(40),
                    
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Image.asset('assets/images/gainePlastic.png', width: 400, height: 300,),
                        Text(
                          'Gaine Plastic',
                          style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
                        ),
                        RichText(
                            text: TextSpan(text: 'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension',
                            style: TextStyle(color: Colors.white, fontSize: 15), ),
                            
                          ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

and this is the model class Product

    class Products {
    final String name, discription;
    final String image;
  


  Products(
      { required this.name, required this.discription, required this.image});
List<Products> products = [
    Products(
        name: 'Gaine Plastic',
        discription:
            'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension ',
        image: 'assets/images/gainePlastic.png'),
    Products(
        name: 'Gaine Plastic',
        discription:
            'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension ',
        image: 'assets/images/port.png'),
    Products(
        name: 'Gaine Plastic',
        discription:
            'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension ',
        image: 'assets/images/Sheet.png'),
    Products(
        name: 'Gaine Plastic',
        discription:
            'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension ',
        image: 'assets/images/gainePlastic.png'),
    Products(
        name: 'Gaine Plastic',
        discription:
            'Les gaines ou fourreaux de protection utilisables dans l\'habitat dépendent de la norme NF C 15-100 relative aux installations électriques à basse tension ',
        image: 'assets/images/gainePlastic.png'),
  ];
  
}