I am working with a ListView. The code is given below:
MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.separated(
separatorBuilder: (context, index) {
return Divider();
},
itemCount: 3,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.all(8.0),
child: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 6),
child: SquareAvatar(
assetLocation: 'assets/images/profile_avatar.png'),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 6),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Dr. Jose Philips',
style: TextStyle(
fontSize: AppFontSize.md,
color: AppColor.text,
fontWeight: FontWeight.bold),
),
Text(
'General Physician',
style: TextStyle(
fontSize: AppFontSize.md,
color: AppColor.text),
),
Text(
'Consulted on',
style: TextStyle(
fontSize: AppFontSize.xs,
color: AppColor.primaryBlue,
fontStyle: FontStyle.italic),
),
Row(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 4),
child: Icon(Icons.calendar_today,
color: AppColor.primaryRed)),
Padding(
padding:
EdgeInsets.symmetric(horizontal: 4),
child: Text('Aug 24, 2022'),
)
],
),
],
),
],
)),
Spacer(flex: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Container(
padding: EdgeInsets.zero,
decoration: BoxDecoration(
color: AppColor.veryLightPurple,
borderRadius: BorderRadius.circular(30.0)),
child: IconButton(
onPressed: () => print('pressed'),
icon: Icon(Icons.local_hospital,
color: AppColor.secondayPurple)),
),
Container(
padding: EdgeInsets.zero,
decoration: BoxDecoration(
color: AppColor.veryLightBlue,
borderRadius: BorderRadius.circular(30.0)),
child: IconButton(
onPressed: () => print('pressed'),
icon: Icon(Icons.upload,
color: AppColor.primaryBlue)),
),
],
),
// TextButton(
// style: ButtonStyle(
// foregroundColor:
// MaterialStateProperty.all<
// Color>(Colors.blue),
// ),
// onPressed: () {},
// child: Text('TextButton'),
// )
SolidButton(
onTap: () {},
text: 'text',
color: AppColor.lightBlue)
],
),
],
),
),
);
}))
I have made a custom widget called SolidButton(). The code of the widget is given below:
import 'package:flutter/material.dart';
import 'package:nextgen_myhealth_patients/utility/styles/sizes.dart';
class SolidButton extends StatelessWidget {
const SolidButton(
{super.key,
required this.onTap,
this.color=Colors.white,
required this.text});
final VoidCallback onTap;
final Color color;
final String text;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
width: double.infinity,
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(5), color: color),
padding: const EdgeInsets.all(10),
child: Center(
child: Text(
text,
style: const TextStyle(color: Colors.white, fontSize: AppFontSize.md),
),
),
),
);
}
}
Whenever I am using this custom widget to the ListView Null check operator used on a null value The relevant error-causing widget was ListView this error is occurring. But the listview is working fine if I use built-in flutter widgets like TextButton().
I am trying to find the issue. What is wrong with it?
>Solution :
The issue is using width: double.infinity inside .You can remove it from SolidButton
return GestureDetector(
onTap: onTap,
child: Container(
// width: double.infinity,
On Flutter
Constraints go down. Sizes go up. Parent sets position.
More about constraints