Flutter: How to add items and save it in local storage?

Question

I'm new into flutter and I want to code a Flashcard App. But at the moment, I don't know how to continue coding. I'm stuck at adding a new flashcard and saving the learning set with the title and description and I literally don't find something similar on yt. What's the best way to solve this problem? And is it something with the list widget or am I wrong? In the Picture you see my Page. If you click on the plus icon, it should add a new flashcard with term and definition. And if you click on the button on the bottom, it should save the whole set and the title and the number of flashcards should be visible on the homepage then. The picture:

Here is my code for this Page, and I also created a reusable TextFormField for the title and description of the flashcard-set:

class AddSetPage extends StatefulWidget {
  const AddSetPage({super.key});

  @override
  State<AddSetPage> createState() => _AddSetPageState();
}

class _AddSetPageState extends State<AddSetPage> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: SizedBox(
        height: 100,
        child: const BottomAppBar(
          surfaceTintColor: AppPallete.transparentColor,
          child: Padding(
            padding: EdgeInsets.only(left:75.0, right: 75.0),
            child: CreateSetButton(),
          ),
        ),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                height: 50,
              ),
              IconButton(
                onPressed: (){}, 
                icon: Icon(Icons.arrow_back_rounded, color: AppPallete.whiteColor,size: 30,)
              ),
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                  TitleField(text: 'Titel', fontSize: 24, fontWeight: FontWeight.w700, titleController: null,),
                  SizedBox(height: 5,),
                  DescriptionField(text: 'Beschreibung', descriptionController: null,),
                  SizedBox(height: 5,),
                ],),
              ),
              Padding(
                padding: EdgeInsets.only(left: 10, right: 10),
                
              child: Column(
                children: [
                  KarteiKarte(),
                  SizedBox(height: 10,),
                  KarteiKarte(),
                  SizedBox(height: 10,),
                  IconButton(
                    onPressed: (){},
                    icon: SvgPicture.asset('assets/svg/add.svg', width: 35, height: 35, color: AppPallete.whiteColor,)
                  ),
                ],
              )
              ),
            ],
          ),
        ),
      ),
    );
  }
}

And here is my reusable Flashcard widget:

class KarteiKarte extends StatelessWidget {
  final TextEditingController? definitionController;
  final TextEditingController? begriffController;
  const KarteiKarte({super.key, this.definitionController, this.begriffController});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: AppPallete.primaryColor),
      child: Padding(
        padding: const EdgeInsets.only(left: 10, right: 10, bottom: 20, top: 10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextFormField(
              controller: begriffController,
      decoration: const InputDecoration(
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: AppPallete.whiteColor, width: 2)
        ),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: AppPallete.whiteColor, width: 2),
        ),
      ),
      style: const TextStyle(fontWeight: FontWeight.normal, fontSize: 16),
      maxLines: null,
    ),
    const SizedBox(height: 5,),
    const Text('Begriff', style: TextStyle(fontSize: 13, color: AppPallete.whiteColor),),
    const SizedBox(height: 5,),

    TextFormField(
      controller: definitionController,
      decoration: const InputDecoration(
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: AppPallete.whiteColor, width: 2)
        ),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: AppPallete.whiteColor, width: 2),
        ),
      ),
      style: const TextStyle(fontWeight: FontWeight.normal, fontSize: 16),
      maxLines: null,
    ),
    const SizedBox(height: 5,),
    const Text('Definition', style: TextStyle(fontSize: 13, color: AppPallete.whiteColor),),


          ],
          ),
        ),
    );
  }
}

btw. I want to save the data local, so I was thinking of using the sqflite package? Can someone help me please or send a link to a yt video? Thank you!

I tried nothing yet because I really don't know how to solve something like this and I'm generally new into coding