skip to Main Content

I am listing features of a building. But I don’t want to display features that are not available. The availability values are stored in database. And I am using custom scrollview.

I have attached the image where it was initially. It shows not available when the database says so. But I don’t want that feature to appear when it is not available. My method of doing so gives a null space in that area, which is not my goal.

I just only want to display features that are avialable.

Here is the code :

SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: MediaQuery.of(context).size.width /
                (MediaQuery.of(context).size.height / 2.5),
          ),
          delegate: SliverChildListDelegate(
            [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius:
                        const BorderRadius.all(Radius.circular(15)),
                    border: Border.all(
                      color: Colors.grey,
                      width: 1.0,
                    ),
                    color: Colors.white,
                    boxShadow: const <BoxShadow>[
                      BoxShadow(
                        color: Color.fromARGB(255, 255, 255, 255),
                        blurRadius: 0.0,
                        spreadRadius: -2,
                        offset: Offset(2.0, 0.0),
                      ),
                    ],
                  ),
                  //width: 70.0,
                  //height: 100,
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Center(
                      child: Column(
                        children: [
                          const Icon(
                            Icons.bed,
                            color: Colors.grey,
                            size: 20,
                          ),
                          const Text('Bedroom',
                              style: TextStyle(
                                  color: Colors.grey,
                                  fontWeight: FontWeight.w500,
                                  fontSize: 12)),
                          Text(flat.room,
                              style: const TextStyle(
                                  color: Colors.grey,
                                  fontWeight: FontWeight.w500,
                                  fontSize: 10))
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              
              flat.ewa == "Included"
                  ? Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius:
                              const BorderRadius.all(Radius.circular(15)),
                          border: Border.all(
                            color: Colors.grey,
                            width: 1.0,
                          ),
                          color: Colors.white,
                          boxShadow: const <BoxShadow>[
                            BoxShadow(
                              color: Color.fromARGB(255, 255, 255, 255),
                              blurRadius: 0.0,
                              spreadRadius: -2,
                              offset: Offset(2.0, 0.0),
                            ),
                          ],
                        ),
                        //width: 120.0,
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Center(
                            child: Column(
                              children: [
                                const Icon(
                                  Icons.electric_bolt,
                                  color: Colors.grey,
                                  size: 20,
                                ),
                                const Text('EWA',
                                    style: TextStyle(
                                        color: Colors.grey,
                                        fontWeight: FontWeight.w500,
                                        fontSize: 12)),
                                Text(flat.ewa,
                                    style: const TextStyle(
                                        color: Colors.grey,
                                        fontWeight: FontWeight.w500,
                                        fontSize: 10))
                              ],
                            ),
                          ),
                        ),
                      ),
                    )
                  : null,
              //const SliverToBoxAdapter(child: SizedBox.shrink()),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius:
                        const BorderRadius.all(Radius.circular(15)),
                    border: Border.all(
                      color: Colors.grey,
                      width: 1.0,
                    ),
                    color: Colors.white,
                    boxShadow: const <BoxShadow>[
                      BoxShadow(
                        color: Color.fromARGB(255, 255, 255, 255),
                        blurRadius: 0.0,
                        spreadRadius: -2,
                        offset: Offset(2.0, 0.0),
                      ),
                    ],
                  ),
                  //width: 130.0,
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Center(
                      child: Column(
                        children: [
                          const Icon(
                            Icons.chair,
                            color: Colors.grey,
                            size: 20,
                          ),
                          const Text('Furnished',
                              style: TextStyle(
                                  color: Colors.grey,
                                  fontWeight: FontWeight.w500,
                                  fontSize: 12)),
                          Text(flat.furnished,
                              style: const TextStyle(
                                  color: Colors.grey,
                                  fontWeight: FontWeight.w500,
                                  fontSize: 10))
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius:
                        const BorderRadius.all(Radius.circular(15)),
                    border: Border.all(
                      color: Colors.grey,
                      width: 1.0,
                    ),
                    color: Colors.white,
                    boxShadow: const <BoxShadow>[
                      BoxShadow(
                        color: Color.fromARGB(255, 255, 255, 255),
                        blurRadius: 0.0,
                        spreadRadius: -2,
                        offset: Offset(2.0, 0.0),
                      ),
                    ],
                  ),
                  //width: 130.0,
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Center(
                      child: Column(
                        children: [
                          const Icon(
                            Icons.yard,
                            color: Colors.grey,
                            size: 20,
                          ),
                          const Text('Garden',
                              style: TextStyle(
                                  color: Colors.grey,
                                  fontWeight: FontWeight.w500,
                                  fontSize: 12)),
                          Text(
                              flat.garden == "true"
                                  ? 'Available'
                                  : 'Not Available',
                              style: const TextStyle(
                                  color: Colors.grey,
                                  fontWeight: FontWeight.w500,
                                  fontSize: 10))
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              
             
            ],
          ),
        ),

Initial State
New Error state

2

Answers


  1. TL;DR
    This error mostly occurs when you return null from a conditional in build.
    In null safety of dart, if a widget has a child property and it requires a widget, you can’t pass a widget? which of nullable type.
    Eg: child: someCondition ? Column(...): null
    Here it will throw this error.

    To solve this you can just return a SizedBox() or Container() instead of null

    Login or Signup to reply.
  2. Yo!

    You have two ways to solve this problem.

    First : ( You don’t want your icons to move from one place to another)

    //Replace null -> SizedBox()

                  flat.ewa == "Included"
                      ? Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(15)),
                              border: Border.all(
                                color: Colors.grey,
                                width: 1.0,
                              ),
                              color: Colors.white,
                              boxShadow: const <BoxShadow>[
                                BoxShadow(
                                  color: Color.fromARGB(255, 255, 255, 255),
                                  blurRadius: 0.0,
                                  spreadRadius: -2,
                                  offset: Offset(2.0, 0.0),
                                ),
                              ],
                            ),
                            //width: 120.0,
                            child: Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: Center(
                                child: Column(
                                  children: [
                                    const Icon(
                                      Icons.electric_bolt,
                                      color: Colors.grey,
                                      size: 20,
                                    ),
                                    const Text('EWA',
                                        style: TextStyle(
                                            color: Colors.grey,
                                            fontWeight: FontWeight.w500,
                                            fontSize: 12)),
                                    Text(flat.ewa,
                                        style: const TextStyle(
                                            color: Colors.grey,
                                            fontWeight: FontWeight.w500,
                                            fontSize: 10))
                                  ],
                                ),
                              ),
                            ),
                          ),
                        )
                      : SizedBox(),
    

    Second : (You don’t want holes in your grid)

              if(flat.ewa == "Included")
                  { Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius:
                              const BorderRadius.all(Radius.circular(15)),
                          border: Border.all(
                            color: Colors.grey,
                            width: 1.0,
                          ),
                          color: Colors.white,
                          boxShadow: const <BoxShadow>[
                            BoxShadow(
                              color: Color.fromARGB(255, 255, 255, 255),
                              blurRadius: 0.0,
                              spreadRadius: -2,
                              offset: Offset(2.0, 0.0),
                            ),
                          ],
                        ),
                        //width: 120.0,
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Center(
                            child: Column(
                              children: [
                                const Icon(
                                  Icons.electric_bolt,
                                  color: Colors.grey,
                                  size: 20,
                                ),
                                const Text('EWA',
                                    style: TextStyle(
                                        color: Colors.grey,
                                        fontWeight: FontWeight.w500,
                                        fontSize: 12)),
                                Text(flat.ewa,
                                    style: const TextStyle(
                                        color: Colors.grey,
                                        fontWeight: FontWeight.w500,
                                        fontSize: 10))
                              ],
                            ),
                          ),
                        ),
                      ),
                    )
                  }.single
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search