Get the solution ↓↓↓
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))
],
),
),
),
),
),
],
),
),
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
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 aSizedBox() orContainer() instead of null
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
Welcome to the Q&A site for web developers. Here you can ask a question about the problem you are facing and get answers from other experts. We have created a user-friendly interface so that you can quickly and free of charge ask a question about a web programming problem. We also invite other experts to join our community and help other members who ask questions. In addition, you can use our search for questions with a solution.
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.