Laura
Laura

Reputation: 1

Flutter UI Screen doesn't update

I am new to Flutter and need some help. I am working on an App to choose between Eating Plans. In the setting screen I want the user to be able to make some changes on the plans. You can klick on a weekday and edit the eating plan for that day. The changes are showing correctly in the UI and database, but when I switch to another weekday and back to the edited weekday, the changes are not made and are back to what it was before. When I leave the whole screen and go back to that edited weekday, the changes are shown. Just when I switch between the weekdays, they are not and I don't know why. On the other side, the changes on the Chips for the kalendar weeks (Kalenderwochen) are correctly shown always.

class EatingPlanForm extends StatefulWidget {
  final GlobalKey<FormState> formKey;
  final int speiseplanIndex;
  final FirestoreEatingPlanRepository firestoreEatingPlanRepository;
  EatingPlan selectedEatingPlan;
  final void Function(EatingPlan) onEatingPlanUpdated;
  final TextEditingController kalenderwocheController;

  EatingPlanForm({
    super.key,
    required this.formKey,
    required this.speiseplanIndex,
    required this.firestoreEatingPlanRepository,
    required this.selectedEatingPlan,
    required this.onEatingPlanUpdated,
    required this.kalenderwocheController,
  });

  @override
  State<EatingPlanForm> createState() => _EatingPlanFormState();
}

class _EatingPlanFormState extends State<EatingPlanForm> {
  @override
  Widget build(BuildContext context) {
    
    return Form(
      key: widget.formKey,
      child: ListView(
        children: [
          _buildChipsForKalenderwochen(),
          CustomTextField(
            label: 'Mittagessen 1',
            initialValue: widget.selectedEatingPlan.mittagessen1,
            mealType: 'mittagessen1',
            onChanged: (value) => _updateMeal('mittagessen1', value),
          ),
          CustomTextField(
            label: 'Mittagessen 2',
            initialValue: widget.selectedEatingPlan.mittagessen2 ?? '',
            mealType: 'mittagessen2',
            onChanged: (value) => _updateMeal('mittagessen2', value),
          ),
          CustomTextField(
            label: 'Mittagessen 3',
            initialValue: widget.selectedEatingPlan.mittagessen3 ?? '',
            mealType: 'mittagessen3',
            onChanged: (value) => _updateMeal('mittagessen3', value),
          ),
          CustomTextField(
            label: 'Beilagensalat',
            initialValue: widget.selectedEatingPlan.beilagensalat ?? '',
            mealType: 'beilagensalat',
            onChanged: (value) => _updateMeal('beilagensalat', value),
          ),
          CustomTextField(
            label: 'Nachtisch',
            initialValue: widget.selectedEatingPlan.nachtisch ?? '',
            mealType: 'nachtisch',
            onChanged: (value) => _updateMeal('nachtisch', value),
          ),
          CustomTextField(
            label: 'Abendessen 1',
            initialValue: widget.selectedEatingPlan.abendessen1,
            mealType: 'abendessen1',
            onChanged: (value) => _updateMeal('abendessen1', value),
          ),
          CustomTextField(
            label: 'Abendessen 2',
            initialValue: widget.selectedEatingPlan.abendessen2 ?? '',
            mealType: 'abendessen2',
            onChanged: (value) => _updateMeal('abendessen2', value),
          ),
          ElevatedButton(
            onPressed: () async {
              if (widget.formKey.currentState!.validate()) {
                await widget.firestoreEatingPlanRepository.updateEatingPlan(widget.selectedEatingPlan);
                FocusScope.of(context).unfocus();
                ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Speiseplan aktualisiert')));
              }
            },
            child: const Text('Speiseplan aktualisieren'),
          ),
          ElevatedButton(
            onPressed: () => _showDeleteConfirmationDialog(context),
            style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
            child: const Text('Speiseplan löschen'),
          ),
        ],
      ),
    );
  }

  void _updateMeal(String mealType, String value) {
    setState(() {
      widget.selectedEatingPlan = widget.selectedEatingPlan.copyWith(
        wochentag: mealType == 'wochentag' ? value : null,
        mittagessen1: mealType == 'mittagessen1' ? value : null,
        mittagessen2: mealType == 'mittagessen2' ? value : null,
        mittagessen3: mealType == 'mittagessen3' ? value : null,
        beilagensalat: mealType == 'beilagensalat' ? value : null,
        nachtisch: mealType == 'nachtisch' ? value : null,
        abendessen1: mealType == 'abendessen1' ? value : null,
        abendessen2: mealType == 'abendessen2' ? value : null,
      );
    });
    setState(() {
      widget.onEatingPlanUpdated(widget.selectedEatingPlan);
    });
  }
Widget _buildChipsForKalenderwochen() {
    return Row(
      children: [
        Wrap(
          spacing: 4.0,
          runSpacing: 4.0,
          children: widget.selectedEatingPlan.kalenderwochen.map((kw) {
            return Chip(
              label: Text('KW $kw'),
              onDeleted: () async {
                try {
                  await widget.firestoreEatingPlanRepository.deleteKalenderwoche(
                    widget.speiseplanIndex,
                    widget.selectedEatingPlan.wochentag,
                    kw,
                  );
                  setState(() {
                    widget.selectedEatingPlan.kalenderwochen.remove(kw);
                  });
                  if (widget.formKey.currentState!.validate()) {
                    await widget.firestoreEatingPlanRepository.updateEatingPlan(widget.selectedEatingPlan);
                  } else {
                    print("Fehler");
                  }
                } catch (e) {
                    print("Fehler beim Löschen der Kalenderwoche: $e");
                  }
                },
              );
            }).toList(),
          ),
        const SizedBox(width: 8.0), // Abstand zwischen den Chips und dem Textfeld
        SizedBox(
          width: 100.0, // Festlegen einer festen Breite für das Textfeld
          height: 32.0,
          child: TextField(
            controller: widget.kalenderwocheController,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(
              labelText: 'KW',
              border: OutlineInputBorder(),
            ),
          ),
        ),
        IconButton(
          icon: const Icon(Icons.add),
          onPressed: () async {
            final kalenderwoche = int.tryParse(widget.kalenderwocheController.text);
            if (kalenderwoche != null && !widget.selectedEatingPlan.kalenderwochen.contains(kalenderwoche)) {
              try {
                await widget.firestoreEatingPlanRepository.addKalenderwoche(
                  widget.speiseplanIndex,
                  widget.selectedEatingPlan.wochentag,
                  kalenderwoche,
                );
                setState(() {
                  widget.selectedEatingPlan.kalenderwochen.add(kalenderwoche);
                });
                widget.kalenderwocheController.clear();
                if (widget.formKey.currentState!.validate()) {
                  await widget.firestoreEatingPlanRepository.updateEatingPlan(widget.selectedEatingPlan);
                } else {
                  print("Fehler");
                }
              } catch (e) {
                print("Fehler beim Hinzufügen der Kalenderwoche: $e");
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Fehler beim Hinzufügen der Kalenderwoche')),
                );
              }
            }
          }
        ),
      ],
    );
  }
}

And this is my CustomTextField

class CustomTextField extends StatelessWidget {
  final String label;
  final String initialValue;
  final String mealType;
  final void Function(String) onChanged;

  const CustomTextField({super.key, required this.label, required this.initialValue, required this.onChanged, required this.mealType});
  
  @override
  Widget build(BuildContext context) {
    final TextEditingController controller = TextEditingController(text: initialValue);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Expanded(
              child: TextFormField(
                controller: controller,
                decoration: InputDecoration(labelText: label),
                onChanged: (value) => onChanged(value),
              ),
            ),
          ]
        )
      ]
    );
  }
}

I tried making the CustomTextField a Stateful Widget but that didn't help either. I am expecting that the changes the user makes are shown correctly in the UI independent of switching the screens.

Upvotes: 0

Views: 37

Answers (0)

Related Questions