Dart Flutter sliderShow textFormField values ​on each page stay the same

Question

I have such an application:

The application purpose is to query whether the word entered in the textFormField corresponds to the meaning I keep in the list. This is a language app. The above screen is the test part.

I give the person a word and ask him to write it in Turkish.

But there is a problem here. I am using CarouselSlider for testing. Each slider screen has a textFormField. But every time I change the page, the value in the textFormField from the previous page remains.

Example:

Slider page 1:

Slider page 2:

---

The "Kontrol et" button is querying the correctness of the entered word.

I want the textFormField to be reset and empty on every page change. How can I do that?

---

Codes:

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:getwidget/getwidget.dart';

class selamlasma_test1 extends StatelessWidget {
  final CarouselController _controller = CarouselController();
  final myController = TextEditingController();
  List<wordAndMeaning> wordsList = [
    wordAndMeaning("Hello", "Merhaba", false),
    wordAndMeaning("What's up?", "Naber?", false),
    wordAndMeaning("How are you?", "Nasılsın?", false),
    wordAndMeaning("Good morning", "Günaydın", false),
    wordAndMeaning("Good night", "İyi geceler", false),

  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber[500],
        bottomOpacity: 0,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: Text("Selamlama Testi 1", style: TextStyle(fontSize: 25),),
      ),

      body: Builder(builder: (context) {
        final double height = MediaQuery.of(context).size.height;
        return Column(
          children: [
            CarouselSlider(
              carouselController: _controller,
              options: CarouselOptions(
                height: height - 86.8,
                viewportFraction: 1.0,
                enlargeCenterPage: false,
              ),
              items: wordsList.map((wordAndMeaning word) {
                return Builder(
                  builder: (BuildContext context) {
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      decoration: BoxDecoration(color: Colors.amber),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Expanded(
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Padding(
                                  padding: EdgeInsets.all(15),
                                  child: TextFormField( // <<<<!!!!!!!!
                                    decoration: InputDecoration(
                                      border: OutlineInputBorder(),
                                      labelText: '"' + word.word + '"' + " Türkçesi", floatingLabelStyle: TextStyle(fontSize: 23),
                                      prefix: Padding(
                                        padding: EdgeInsets.only(left: 5, right: 10),
                                        child: Icon(Icons.translate),
                                      ),
                                      labelStyle: TextStyle(
                                        fontSize: 20,
                                        fontWeight: FontWeight.bold,
                                        
                                      ),
                                    ),
                                    style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold,
                                    ),
                                    controller: myController,
                                    onChanged: (value) {
                                      
                                    },
                                  ),
                                ),
                                GFButton(
                                  padding: EdgeInsets.only(left: 20, right: 20),
                                  size: 45,
                                  text: "Kontrol et", textStyle: TextStyle(fontSize: 25),
                                  onPressed: () {
                                     //eğer bir değer girilmemişse:
                                    if (myController.text == "") {
                                      Scaffold.of(context).showSnackBar(SnackBar(
                                        content: Text("Lütfen bir değer giriniz!"),
                                        duration: Duration(seconds: 2),
                                      ),
                                      );
                                    }
                                    if (myController.text.toLowerCase() == word.meaning.toLowerCase()) {
                                      print("Doğru");
                                    }
                                  },
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                          
                        ],
                      ),
                    );
                  },
                );
              }).toList(),
            ),
          ],
        );
      }) ,
    );
  }
}

class wordAndMeaning {
  String word;
  String meaning;
  bool showMeaning;

  wordAndMeaning(this.word, this.meaning, this.showMeaning);
}

Thanks in advance for the help.

Answer 1

You are facing this issue, because your current TextEditingController is same for all your TextFormField. Try providing for each TextFormField its own controller.

return Builder(builder: (BuildContext context) {
  final TextEditingController myController = TextEditingController();
  return Container(
    child: TextFormField(
      controller: myController,
    ),
  );
});