Error message - A value of type 'Color?' can't be assigned to a variable of type 'Color' because 'Color?' is nullable and 'Color' isn't - flutter

Question

How do I resolve this issue because it worked in an older version of flutter saw it on a Youtube video dated 2 years ago. Added some constraints because it's required now.
Getting this error msg - A value of type 'Color?' can't be assigned to a variable of type 'Color' because 'Color?' is nullable and 'Color' isn't.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'info.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light(),
home: const MyPage(),
);
}
}
class MyPage extends StatefulWidget {
const MyPage({super.key});
#override
State<MyPage> createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Restaurant"),
),
body: Padding(
padding: const EdgeInsets.all(5),
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
Hero(
tag: "cakeitem",
child: FittedBox(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => InfoPage()),
);
},
child: Card(
// color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 5,
child: Row(
children: <Widget>[
itemcake(),
SizedBox(
width: 90,
height: 100,
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: const Image(
fit: BoxFit.cover,
alignment: Alignment.topRight,
image: AssetImage('assets/cake.jpg'),
),
),
),
],
),
),
),
),
),
FittedBox(
child: Card(
// color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 5,
child: Row(
children: <Widget>[
juiceitem(),
Container(
width: 90,
height: 100,
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: const Image(
fit: BoxFit.cover,
alignment: Alignment.topRight,
image: AssetImage('assets/juice.jpg'),
),
),
),
],
),
),
),
FittedBox(
child: Card(
// color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 5,
child: Row(
children: <Widget>[
pizzaitem(),
SizedBox(
width: 90,
height: 100,
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: const Image(
fit: BoxFit.cover,
alignment: Alignment.topRight,
image: AssetImage('assets/pizza.jpg'),
),
),
),
],
),
),
),
FittedBox(
child: Card(
// color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 5,
child: Row(
children: <Widget>[
eliteitem(),
Container(
width: 90,
height: 100,
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: const Image(
fit: BoxFit.cover,
alignment: Alignment.topRight,
image: AssetImage('assets/elite.jpg'),
),
),
),
],
),
),
),
],
),
),
);
}
Widget itemcake() {
return Column(
//mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: Text(
"Italian Choco Cake",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 15, color: Colors.red),
),
),
const SizedBox(
height: 5,
),
const Text(
"Dark belgium chocolate",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 9.5,
color: Colors.grey),
),
const SizedBox(
height: 5,
),
Row(
children: <Widget>[
const Icon(
Icons.shopping_cart,
size: 15,
),
const SizedBox(
width: 5,
),
Container(
width: 35,
decoration: BoxDecoration(
color: Colors.lightBlue[100],
//color: Theme.of(context).accentColor,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: const Text(
"Cold",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 9.5),
),
),
const SizedBox(
width: 5,
),
Container(
width: 35,
decoration: BoxDecoration(
color: Colors.red[100],
//color: Theme.of(context).accentColor,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: const Text(
"Fresh",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 9.5),
),
),
],
),
const SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const <Widget>[
Text(
"Ratings",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 7,
color: Colors.grey),
),
SizedBox(
width: 10,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
],
),
],
);
}
Widget juiceitem() {
return Container(
//width: 150,
child: Column(
//mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: Text(
"Fresh Mango Juice",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 15, color: Colors.red),
),
),
const SizedBox(
height: 5,
),
const Text(
"Dark belgium chocolate",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 9.5,
color: Colors.grey),
),
const SizedBox(
height: 5,
),
Row(
children: <Widget>[
const Icon(
Icons.shopping_cart,
size: 15,
),
const SizedBox(
width: 5,
),
Container(
width: 35,
decoration: BoxDecoration(
color: Colors.lightBlue[100],
//color: Theme.of(context).accentColor,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: const Text(
"Cold",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 9.5),
),
),
const SizedBox(
width: 5,
),
Container(
width: 35,
decoration: BoxDecoration(
color: Colors.red[100],
//color: Theme.of(context).accentColor,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: const Text(
"Fresh",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 9.5),
),
),
const SizedBox(
width: 5,
),
Container(
width: 35,
decoration: BoxDecoration(
color: Colors.yellow[400],
//color: Theme.of(context).accentColor,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: const Text(
"New",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 9.5),
),
),
],
),
const SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const <Widget>[
Text(
"Ratings",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 7,
color: Colors.grey),
),
SizedBox(
width: 10,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
],
),
],
),
);
}
Widget pizzaitem() {
return Column(
//mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: Text(
"Cheese Pizza Italy ",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 15, color: Colors.red),
),
),
const SizedBox(
height: 5,
),
const Text(
"Double cheese New York Style",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 9.5,
color: Colors.grey),
),
const SizedBox(
height: 5,
),
Row(
children: <Widget>[
const Icon(
Icons.shopping_cart,
size: 15,
),
const SizedBox(
width: 5,
),
Container(
width: 35,
decoration: BoxDecoration(
color: Colors.deepOrange[300],
//color: Theme.of(context).accentColor,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: const Text(
"Spicy",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 9.5),
),
),
const SizedBox(
width: 5,
),
Container(
width: 35,
decoration: BoxDecoration(
color: Colors.yellow[400],
//color: Theme.of(context).accentColor,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: const Text(
"New",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 9.5),
),
),
],
),
const SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const <Widget>[
Text(
"Ratings",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 7,
color: Colors.grey),
),
SizedBox(
width: 10,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
],
),
],
);
}
Widget eliteitem() {
return Column(
//mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: Text(
"Alinea Chicago",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 15, color: Colors.red),
),
),
const SizedBox(
height: 5,
),
const Text(
"Classical French cooking",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 9.5,
color: Colors.grey),
),
const SizedBox(
height: 5,
),
Row(
children: <Widget>[
const Icon(
Icons.shopping_cart,
size: 15,
),
const SizedBox(
width: 5,
),
Container(
width: 35,
decoration: BoxDecoration(
color: Colors.deepOrange[300],
//color: Theme.of(context).accentColor,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: const Text(
"Spicy",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 9.5),
),
),
const SizedBox(
width: 5,
),
Container(
width: 35,
decoration: BoxDecoration(
color: Colors.red,
//color: Theme.of(context).accentColor,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: const Text(
"Hot",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 9.5,
color: Colors.white),
),
),
const SizedBox(
width: 5,
),
Container(
width: 35,
decoration: BoxDecoration(
color: Colors.yellow[400],
//color: Theme.of(context).accentColor,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: const Text(
"New",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 9.5,
),
),
),
],
),
const SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const <Widget>[
Text(
"Ratings",
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 7,
color: Colors.grey),
),
SizedBox(
width: 10,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
Icon(
Icons.star,
size: 10,
color: Colors.orangeAccent,
),
],
),
],
);
}
}

Answer 1

The problem isn’t that one is nullable and the other is not. The problem is that one may have no value but the other requires one. So what do you think should happen if there is no value? You need to figure that out first before you can change your code.