No errors in Flutter but custom widgets not showing - flutter

Question

I am trying to make a ResuseableCard custom widget and IconContent custom widget.
Problem: Reuseable card are empty. IconContent is not showing inside ReusueableCard
What I have tried:
I also failed at creating a cardChild property within Reuseable Card that has a Column containing the icon, sized box and label. I did not see any errors when I tried this but the cards remained empty!
What has worked: When everything is spelled out within ReuseableCard (no separate IconContent widget or cardChild property) it works. But then all the cards look the same.
Another thing that works is to separately code each card. I don't want repeated code. The tutorial I follow works so why doesn't my code?
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
const bottomContainerHeight = 80.0;
const activeCardColor = Color(0xFF1D1E33);
const bottomContainerColor = Color(0xFFEB1555);
const labelColor = Color(0xFF76FF03);
class InputPage extends StatefulWidget {
#override
_ InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF0A0E21),
title: Text('BMI CALCULATOR'),
centerTitle: true,
),
body: Column(
children: [
Expanded(
child: Row(children: [
Expanded(
child: ReuseableCard(
colour: activeCardColor,
cardChild: IconContent(FontAwesomeIcons.venus, 'Female'),
),
),
Expanded(
child: ReuseableCard(
colour: activeCardColor,
cardChild: Column(children: [
Icon(FontAwesomeIcons.mars, size: 80.0),
SizedBox(height: 15.0),
Text('Male',
style: TextStyle(
fontSize: 18.0, color: (Color(0xFF8d8E98)))),
]),
)),
])),
Expanded(
child: ReuseableCard(colour: activeCardColor),
),
Expanded(
child: Row(
children: [
Expanded(
child: ReuseableCard(colour: activeCardColor),
),
Expanded(
child: ReuseableCard(colour: activeCardColor),
)
],
),
),
Container(
color: bottomContainerColor,
margin: EdgeInsets.only(top: 10.0),
width: double.infinity,
height: 80.0,
)
],
));
}
}
class ReuseableCard extends StatelessWidget {
ReuseableCard({#required colour, cardChild});
Color? colour;
Widget? IconContent;
#override
Widget build(BuildContext context) {
return Container(
child: IconContent,
margin: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: Color(0xFF1D1E33),
borderRadius: BorderRadius.circular(10.0)));
}
}
class IconContent extends StatelessWidget {
IconData? data;
String label = 'label';
IconContent(data, label);
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(data, size: 80.0),
SizedBox(height: 15.0),
Text(label,
style: TextStyle(
fontSize: 18.0,
color: labelColor,
))
]);
}
}

Answer 1

You have not defined cardChild properly and are not calling it in the ReuseableCard. I have made all the fields as required in the below code.
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
const bottomContainerHeight = 80.0;
const activeCardColor = Color(0xFF1D1E33);
const bottomContainerColor = Color(0xFFEB1555);
const labelColor = Color(0xFF76FF03);
class InputPage extends StatefulWidget {
#override
_ InputPageState createState() => _InputPageState(); }
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF0A0E21),
title: Text('BMI CALCULATOR'),
centerTitle: true,
),
body: Column(
children: [
Expanded(
child: Row(children: [
Expanded(
child: ReuseableCard(
colour: activeCardColor,
cardChild: IconContent(data:FontAwesomeIcons.venus,label: 'Female'),
),
),
Expanded(
child: ReuseableCard(
colour: activeCardColor,
cardChild: Column(children: [
Icon(FontAwesomeIcons.mars, size: 80.0),
SizedBox(height: 15.0),
Text('Male',
style: TextStyle(
fontSize: 18.0, color: (Color(0xFF8d8E98)))),
]),
)),
])),
Expanded(
child: ReuseableCard(colour: activeCardColor),
),
Expanded(
child: Row(
children: [
Expanded(
child: ReuseableCard(colour: activeCardColor),
),
Expanded(
child: ReuseableCard(colour: activeCardColor),
)
],
),
),
Container(
color: bottomContainerColor,
margin: EdgeInsets.only(top: 10.0),
width: double.infinity,
height: 80.0,
)
],
));
}
}
class ReuseableCard extends StatelessWidget {
ReuseableCard({#required this.colour,#required this.cardChild});
Color? colour;
Widget? cardChild;//cardChild defined here so the ReuseableCard can use it
#override
Widget build(BuildContext context) {
return Container(
child: cardChild,//called here
margin: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: Color(0xFF1D1E33),
borderRadius: BorderRadius.circular(10.0)));
}
}
class IconContent extends StatelessWidget {
IconData? data;
String? label;
IconContent({#required this.data, #required this.label});
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(data, size: 80.0),
SizedBox(height: 15.0),
Text(label??"label",
style: TextStyle(
fontSize: 18.0,
color: labelColor,
))
]);
}
}

Answer 2

I think this will do.
class ReuseableCard extends StatelessWidget {
ReuseableCard({Key? key,required this.colour, this.cardChild}) : super(key: key);
final Color colour;
final Widget? cardChild;
#override
Widget build(BuildContext context) {
return Container(
child: cardChild?? const SizedBox(),
margin: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: Color(0xFF1D1E33),
borderRadius: BorderRadius.circular(10.0)));
}
}
when you use
required
you don't have to say it can be null, also don't user widgets directly if it can be null.
if you want more help with your design, provide us your UI design what you trying to create.