How can i make a title of my properties for each shuffled items in flutter?

Question

it is my class:

class Vocabulary{
     String word;
     String translation;

   Vocabulary({
      required this.word,
      required this.translation,
    });}

and i create a quiz of word and translation, that are user inputs .

class ShuffleQuiz extends StatefulWidget {

  final List <Vocabulary> vocabularyList ;
  ShuffleQuiz(this.vocabularyList);

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

class _ShuffleQuizState extends State<ShuffleQuiz> {

  Random random = Random();
  final GlobalKey<FormState> _formKey = GlobalKey();
  int _index = 0;
  String currentQuestion = "";
  String currentAnswer = "";

  final TextEditingController _answerController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    if (random.nextBool()) {
      currentQuestion = widget.vocabularyList[_index].translation;
      currentAnswer = widget.vocabularyList[_index].word;
    }
    else {
      currentQuestion = widget.vocabularyList[_index].word;
      currentAnswer = widget.vocabularyList[_index].translation;
    }
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            width: 200,
            height: 180,
            child: FlashCard(
              frontWidget: Center(
                  child: Align(
                    alignment: Alignment.center,
                    child:
                    Text(currentQuestion,
                        style: TextStyle(
                          fontWeight: FontWeight.bold, fontSize: 24,)
                    ),
                  )),
              backWidget: Form(
                key: _formKey,
                child: Column(
                    children: [
                      TextFormField(
                        controller: _answerController,
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return 'Please enter Your answer';
                          }
                          return null;
                        },
                        decoration: const InputDecoration(
                          hintText: "your answer",
                        ),
                      ),
                      ElevatedButton(onPressed: () {
                        setState(() {
                          if (_formKey.currentState!.validate()) {
                            _checkAns(_answerController.text);
                          }
                        });
                      },
                          child: const Text("analysis"))
                    ]
                ),
              ),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              if(_index != 0 )
                OutlinedButton.icon(
                  onPressed: () {
                    _answerController.clear();
                    _index--;
                    _rebuild();
                  },
                  icon: const Icon(Icons.arrow_left,
                      size: 30,
                      color: Colors.pink),
                  label: const Text('Prev',
                    style: TextStyle(color: Colors.black87),
                  ),
                ),
              if(_index < widget.vocabularyList.length - 1)
                OutlinedButton.icon(
                  onPressed: () {
                    _answerController.clear();
                    _index++;
                    _rebuild();
                  },
                  icon: const Icon(Icons.arrow_right,
                      size: 30,
                      color: Colors.pink),
                  label: const Text('Next',
                    style: TextStyle(color: Colors.black87),
                  ),
                ),
            ],
          )
        ]
    );
  }

  void _rebuild() {
    if (mounted) {
      setState(() {});
    }
  }

  void _checkAns(String value) {
    if (currentAnswer == value) {
      print("1");
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Correct')),
      );
    }
    else {
      ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('inCorrect')));
    }
  }

The card that i can turn over should have a heading stating whether it's the translation or the word. for example when it is "Hallo" should be "Word" above it, and if instead of "Hallo" there was "hi", the heading should be "translation". how can i handle it?

Answer 1

i found the Answer, and wanted to share it with you guys, i just changed sth like this:

@override
  Widget build(BuildContext context) {
    if (random.nextBool()) {
      currentQuestion = widget.vocabularyList[_index].translation;
      currentAnswer = widget.vocabularyList[_index].word;
      currentHeadline = "Translation";
    }
    else {
      currentQuestion = widget.vocabularyList[_index].word;
      currentAnswer = widget.vocabularyList[_index].translation;
      currentHeadline = "Word";
    }
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height:30,
            width: 80,
            child: Align(
              child: Text(currentHeadline , style: TextStyle( color: Colors.black87 ,
                 fontSize: 15, fontWeight: FontWeight.bold),)),
                decoration: BoxDecoration(
                gradient: LinearGradient(
                colors: [Colors.orange , Colors.redAccent]
                ),
                boxShadow: [
                BoxShadow(
                color: Colors.grey,
                blurRadius: 10,
                offset: Offset(0,10)
                )]),
          ),