如何随机化 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();
  }