Flutter initialization filed

Question

I have done a flutter app with a code where the user can select gender from 2 cards and the GestureDetector the android studio don't give me any error but when I try to test the app I recive this error on device LateInitilizationError: Field 'selectedGender' has not been initialized

here is the code

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'icon_content.dart';
import 'reusable_card.dart';

const bottomContainerHeight = 80.0;
const activeCardColour = Color(0xFF1D1E33);
const inactiveCardColour = Color(0xFF111328);
const bottomContainerColour = Color(0XFFEB1555);

class InputPage extends StatefulWidget {
  InputPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _InputPageState createState() => _InputPageState();
}

enum Gender {
  male,
  female,
}

class _InputPageState extends State<InputPage> {
  late Gender selectedGender;
  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(widget.title),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                  child: ReusableCard(
                    onPress: () {
                      setState(() {
                        selectedGender = Gender.male;
                      });
                    },
                    colour: selectedGender == Gender.male
                        ? activeCardColour
                        : inactiveCardColour,
                    cardChild: IconContent(
                      customIcon: FontAwesomeIcons.mars,
                      customText: ('MALE'),
                    ),
                  ),
                ),
                Expanded(
                  child: ReusableCard(
                    onPress: () {
                      setState(() {
                        selectedGender = Gender.female;
                      });
                    },
                    colour: selectedGender == Gender.female
                        ? activeCardColour
                        : inactiveCardColour,
                    cardChild: IconContent(
                      customIcon: FontAwesomeIcons.venus,
                      customText: ('FEMALE'),
                    ),
                  ),
                ),
              ],
            )),
            Expanded(
              child: ReusableCard(
                  onPress: () {
                    setState(() {});
                  },
                  colour: activeCardColour,
                  cardChild: Column()),
            ),
            Expanded(
                child: Row(
              children: <Widget>[
                Expanded(
                  child: ReusableCard(
                      onPress: () {
                        setState(() {});
                      },
                      colour: activeCardColour,
                      cardChild: Column()),
                ),
                Expanded(
                    child: ReusableCard(
                        onPress: () {
                          setState(() {});
                        },
                        colour: activeCardColour,
                        cardChild: Column())),
              ],
            )),
            Container(
              color: bottomContainerColour,
              margin: EdgeInsets.only(top: 10.0),
              width: double.infinity,
              height: bottomContainerHeight,
            ),
          ],
        ));
  }
}

i try to search about flutter docs testing erros as device told to me but i find a solution

Answer 1

late is simply saying that this value will be initialized before read. Simple way to handle this situation will be making nullable

Gender? selectedGender; the rest of your code will be ok with it.

More about late-variables

Test Widget

class _APPState extends State<APP> {
  Gender? selectedGender;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: () {
                  setState(() {
                    selectedGender = Gender.female;
                  });
                },
                child: Container(
                  height: 100,
                  width: 100,
                  color: selectedGender == Gender.female
                      ? Colors.green
                      // activeCardColour
                      : inactiveCardColour,
                ),
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    selectedGender = Gender.male;
                  });
                },
                child: Container(
                  height: 100,
                  width: 100,
                  color: selectedGender == Gender.male
                      ? Colors.green
                      // activeCardColour
                      : inactiveCardColour,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

From your first row you have this

colour: selectedGender == Gender.male
        ? activeCardColour
        : inactiveCardColour,

here the value of selectedGender is null at first launch. You need to set a value for this property.