Reputation: 185
I wonder if someone can help me with something that’s driving me up the wall.
I’m very new to flutter and the dart language. Working on a basic personal project as I progress through a Udemy course.
It’s called ‘Bushy Bingo’ – The below is the UI (set aside the layout issues for now) What I want is for the order of the animals to shuffle when the user clicks the shuffle button. So you get a randomized game each time.
The animals are all custom widgets I’ve created which sit within a ‘Table’ widget, 4 Table Rows, 4 children a piece to create the 4 x 4 grid.
My thinking is that I need to
Assign a ‘positionNumber’ value as an into to each cell of the grid
Create an ‘animalIndex’ map containing my 16 animals
Write a for loop function, which creates a tableOrder from scratch on the following logic..
A - For 16 times...
B - Generate a random number between zero and the length of my animalIndex
C - Take the corresponding entry from my animalIndex and add it as a new entry to my tableOrder list
D - Remove the entry from the animalIndex
Assuming that's reasonable logic, i cannot get it to work with dart. Please see the below screenshot to see the issue
If anyone could let me know where I'm going wrong it would be massively appreciated. Maybe my whole approach is wrong. (I've been wrong before ;))
Upvotes: 1
Views: 494
Reputation: 145
EDIT: I'm really sorry, I didnt mean to step on any toes. You probably put alot of work into what you have already. Your approach could be used obviously, but its a bit over the top for what you wanted to achieve. That's how I came to my answer. If that is not what you are looking for then I hope someone else can help you with the generation of your numbers etc..
I dont have enough reputation yet to comment, so I'm doing it like this. The best way would be to make an animal class and build a list from there.
import 'package:flutter/material.dart';
class Animal {
String name;
Image animalImage;
Animal({this.name, this.animalImage});
}
Then use that to make a list:
List getAnimals() {
return [
Animal(
name: "duck",
animalImage: Image.network('https://picsum.photos/250?image=9'),
),
Animal(
name: "elephant",
animalImage: Image.network('https://picsum.photos/250?image=9'),
),
];
}
Once you have that you can put that in your listviewBuilder. After they press the button you can make a function that takes that list and shuffles it:
example: shuffle docs example: other shuffle stuff
This way you can always add or remove animals. With the class you can add or remove extra data. And since it's a list it will have its own index id's so you can order it, shuffle it, do whatever you want.
ListviewBuilder example. There are ways to make a gridviewbuilder so that's covered too. You can style the widget anyway you want. Gridview example
ListView.builder(
itemCount: getAnimals().length,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
var _data = getAnimals()[index];
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.red,
child: ListTile(
title: Text(_data.name),
),
),
);
})
Upvotes: 1