Flutter initialization LateInitializationError

Question

(https://github.com/panval/cards.git "Link to my github")

Newbie here. Newbie to code actually.

Error: LateInitializationError: Local 'newMyCardTitle' has not been initialized.

Please look at the code on my github or get from version control. App can be run on simulator (Did not try on emulator).

Situation: It's just an add button which returns a Button (Card) on main Page.

Problem: I have to choose the color first then name the card

• but can't name the card and then choose the color. !

The following LateError was thrown while handling a gesture: LateInitializationError: Local 'newMyCardTitle' has not been initialized.

When the exception was thrown, this was the stack: #0 LateError._throwLocalNotInitialized (dart:_internal-patch/internal_patch.dart:199:5) #1 _AddCardState.build. (package:cards/Screens/add_card.dart:112:42) #2 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:1005:21) #3 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:198:24) #4 TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:613:11) #5 BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:298:5) #6 BaseTapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:269:7) #7 GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:157:27) #8 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:449:20) #9 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:425:22) #10 RendererBinding.dispatchEvent (package:flutter/src/rendering/binding.dart:329:11) #11 GestureBinding._handlePointerEventImmediately (package:flutter/src/gestures/binding.dart:380:7) #12 GestureBinding.handlePointerEvent (package:flutter/src/gestures/binding.dart:344:5) #13 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:302:7) #14 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:285:7) #18 _invoke1 (dart:ui/hooks.dart:170:10) #19 PlatformDispatcher._dispatchPointerDataPacket (dart:ui/platform_dispatcher.dart:331:7) #20 _dispatchPointerDataPacket (dart:ui/hooks.dart:94:31) (elided 3 frames from dart:async) Handler: "onTap" Recognizer: TapGestureRecognizer#e34a1 debugOwner: GestureDetector state: ready won arena finalPosition: Offset(340.7, 243.0) finalLocalPosition: Offset(38.2, 36.0) button: 1 sent tap down

import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:provider/provider.dart';
import 'package:cards/Models/card_data.dart';

Color pickerColor = Color(0xffFAFAFA);
Color currentColor = Color(0xffFAFAFA);


class AddCard extends StatefulWidget {
  @override
  State<AddCard> createState() => _AddCardState();
}

class _AddCardState extends State<AddCard> {
  void changeColor(Color color) {
    setState(() => pickerColor = color);
  }

  TextEditingController myController = TextEditingController();

  @override
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    late String newMyCardTitle;
    late Color newCardColor = Color(0xffFAFAFA);

    return Container(
      color: Color(0xff757575),
      child: Container(
        padding: EdgeInsets.all(20.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.0),
            topRight: Radius.circular(20.0),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.fromLTRB(140, 0, 140, 20),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.grey.shade700,
                    borderRadius: BorderRadius.circular(5)),
                height: 4,
                width: 70,
              ),
            ),
            Row(
              children: [
                Expanded(
                  flex: 3,
                  child: Material(
                    borderRadius: BorderRadius.circular(15),
                    elevation: 10,
                    child: TextFormField(
                      textAlign: TextAlign.center,
                      autofocus: true,
                      controller: myController,
                      decoration: InputDecoration(
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(15),
                              borderSide: BorderSide.none),
                          filled: true,
                          fillColor: pickerColor,
                          hintStyle: TextStyle(
                              color: useWhiteForeground(pickerColor)
                                  ? const Color(0xffffffff)
                                  : const Color(0xff000000),
                              fontSize: 18),
                          hintText: 'Nenne deine Neue Karte'),
                      style: (TextStyle(
                          color: useWhiteForeground(pickerColor)
                              ? const Color(0xffffffff)
                              : const Color(0xff000000),
                          fontSize: 20)),
                      onChanged: (newText) {
                        newMyCardTitle = newText;
                      },
                    ),
                  ),
                ),
                Expanded(
                  child: SizedBox(
                    height: 65,
                    child: Padding(
                      padding: EdgeInsets.only(left: 20),
                      child: TextButton(
                          style: TextButton.styleFrom(
                              shadowColor: pickerColor,
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(15)),
                              elevation: 10,
                              backgroundColor: pickerColor),
                          child: Icon(
                            Icons.done,
                            color: useWhiteForeground(pickerColor)
                                ? const Color(0xffffffff)
                                : const Color(0xff000000),
                            size: 40,
                          ),
                          onPressed: () {
                            Provider.of<MyCardData>(context, listen: false)
                                .addCard(newMyCardTitle, newCardColor);
                            Navigator.pop(context);
                          }),
                    ),
                  ),
                ),
              ],
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 15, 10, 5),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.grey.shade300,
                    borderRadius: BorderRadius.circular(5)),
                height: 2,
                width: 70,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 10),
              child: MaterialPicker(
                pickerColor: pickerColor,
                onColorChanged: changeColor,
              ),
            ),
            SizedBox(
              height: 20,
            )
          ],
        ),
      ),
    );
  }
}

I tried

String? cardTitle;

but I get

"Null check operator used on a null value"

Answer 1

You use late String newMyCardTitle; which requires you setting the value very close after that.

When you set the value in an async method that is triggerd much later (like the onPressed) thats too late. When the value isn't immedtiatly set, use String? newMyCardTitle; instead and then check if it is null when pressing the "done" button.

In summary late should only be used when giving the variable a value immedtiatly after its creation. For example in a class:

class Foo {
  late String bar; // using late here because it doesn't get a value instantly but it should not be nullable
  Foo(String another) {
    bar = another;
  }
}