如何隨機化 Dart Flutter 列表項？

Question

我正在構建一個語言應用程序。 該應用程序的目的是向英語教授土耳其語。 首先，讓我給你圖片：

有一個滾動系統。 textFormField 上方所寫單詞的土耳其語將輸入到textFormField中。

我將英語單詞及其土耳其語含義保存在列表中。

列表：

  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),
    wordAndMeaning("How's it going?", "Nasıl gidiyor", false),
    wordAndMeaning("How's your day?", "Günün nasıldı", false),
    wordAndMeaning("How's your day going?", "Günün nasıl gidiyor", false),
    wordAndMeaning("Nice to see you", "Seni görmek güzel", false),
    wordAndMeaning("It's been a while", "Görüşmeyeli uzun zaman oluyor", false),
  ];

屏幕滾動系統中的順序與列表中的順序完全相同。 我希望它隨機排序。 我怎樣才能做到這一點？

代碼：

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

class selamlasma_test1 extends StatefulWidget {
  @override
  State<selamlasma_test1> createState() => _selamlasma_test1State();
}

class _selamlasma_test1State extends State<selamlasma_test1> {
  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),
    wordAndMeaning("How's it going?", "Nasıl gidiyor", false),
    wordAndMeaning("How's your day?", "Günün nasıldı", false),
    wordAndMeaning("How's your day going?", "Günün nasıl gidiyor", false),
    wordAndMeaning("Nice to see you", "Seni görmek güzel", false),
    wordAndMeaning("It's been a while", "Görüşmeyeli uzun zaman oluyor", false),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[500],
      appBar: AppBar(
        backgroundColor: Colors.amber[500],
        bottomOpacity: 0,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: Text("Selamlaşma Testi 1", style: TextStyle(fontSize: 25),),
      ),
      body: Builder(builder: (context) {
        final double height = MediaQuery.of(context).size.height - 160;
        return Column(
          children: [
            CarouselSlider(
              carouselController: _controller,
              options: CarouselOptions(
                reverse: false,
                height: height,
                viewportFraction: 1.0,
                onPageChanged: (index, reason) => setState(() {
                  myController.clear();
                }),
              ),
              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: [
                                Text(
                                  word.word,
                                  style: TextStyle(
                                      fontSize: 30,
                                      fontWeight: FontWeight.bold, color: Colors.black),
                                ),
                                SizedBox(height: 20,),
                                Padding(
                                  padding: EdgeInsets.all(15),
                                  child: TextFormField(
                                    decoration: InputDecoration(
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: BorderSide(
                                        color: Colors.white,
                                        width: 3
                                        ),
                                      ),
                                      enabledBorder: OutlineInputBorder(
                                        borderSide: BorderSide(
                                          color: Colors.white,
                                          // border kalınlığı:
                                          width: 3,
                                          
                                        ),
                                      ),
                                      border: OutlineInputBorder(),
                                      labelText: '"' + word.word + '"' + " Türkçesi", floatingLabelStyle: TextStyle(fontSize: 23, color: Colors.white),
                                      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),
                                  // kenar ovallaştirme:
                                  shape: GFButtonShape.pills,
                                  onPressed: () {
                                     //eğer bir değer girilmemişse:
                                    if (myController.text == "") {
                                      Scaffold.of(context).showSnackBar(SnackBar(
                                        content: Text("Lütfen bir değer giriniz!", style: TextStyle(fontSize: 20),),
                                        duration: Duration(seconds: 2),
                                      ),
                                      );
                                    }
                                    else if (myController.text.toLowerCase() != word.meaning.toLowerCase()) {
                                      Scaffold.of(context).showSnackBar(SnackBar(
                                        content: Text("Yanlış cevap!", style: TextStyle(fontSize: 20),),
                                        duration: Duration(seconds: 2),
                                      ),
                                      );
                                    }
                                    if (myController.text.toLowerCase() == word.meaning.toLowerCase()) {
                                      print("Doğru");
                                      myController.clear();
                                      AlertDialog dogru = AlertDialog(
                                        content: Text("Tebrikler! Doğru bildiniz.", style: TextStyle(fontSize: 22),),
                                        actions: [
                                          GFButton(
                                            padding: EdgeInsets.only(left: 20, right: 20),
                                            size: 35,
                                            text: "Sonraki soru", textStyle: TextStyle(fontSize: 25),
                                            onPressed: () {
                                              _controller.nextPage(
                                                duration: Duration(milliseconds: 500),
                                                curve: Curves.ease,
                                              );
                                              // alert dialog u kapatma:
                                              Navigator.pop(context);
                                            },
                                          ),
                                        
                                        ],
                                      );

                                      showDialog(
                                        context: context,
                                        builder: (BuildContext context) {
                                          return dogru;
                                        },
                                      );
                                    }
                                  },
                                ),
                              ],
                            ),
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                          
                        ],
                      ),
                    );
                  },
                );
              }).toList(),
            ),

            Container(
              padding: EdgeInsets.all(5),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20)),
                  
              ),
              child: Column(
                children: [
                  
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          
                        ),
                        width: 55,
                        height: 55,
                        child: RaisedButton(
                          color: Colors.blue,
                          child: Icon(Icons.arrow_back_ios, size: 30, color: Colors.white,),
                          onPressed: () {
                            _controller.previousPage(
                                duration: const Duration(milliseconds: 100),
                                curve: Curves.easeInCirc,
                                
                            );
                          },
                          // köşeyi yuvarlaştırma:
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25),
                          ),
                          
                        )
                        
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                        ),
                        width: 55,
                        height: 55,
                        child: Container(
                          child: RaisedButton(
                          color: Colors.blue,
                          child: Icon(Icons.arrow_forward_ios, size: 30, color: Colors.white,),
                          onPressed: () {
                            _controller.nextPage(
                                duration: const Duration(milliseconds: 100),
                                curve: Curves.easeInCirc,
                            );
                          },
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25),
                          ),
                          
                        )
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            )
          ],
        );
      }) ,
    );
  }
}

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

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

先謝謝您的幫助。

Answer 1

這將隨機洗牌你的物品：

 wordsList.shuffle();

Answer 2

您可以創建一個初始 state 並使用shuffle方法。 請執行下列操作。

 @override
  initState() {
     wordsList.shuffle();
    super.initState();
  }