php - The element type 'Padding?' can't be assigned to the list type 'Widget'
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))
],
),
),
),
),
),
],
),
),
Answer
Solution:
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
Answer
Solution:
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