No errors in Flutter but custom widgets not showing

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

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.

Answer 2

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,
              ))
        ]);
  }

}