How to make a random order of Cards in the ListView in Flutter when launching the app? - flutter

Question

I have a ListView consisting of several Cards how can I make it so that when the application starts, the order of these Cards in the ListView is random?

Answer 1

You can put all your elements you want to display in one list (if they are not already in a list) before generating the Cards and use the "shuffle" function:
https://api.flutter.dev/flutter/dart-core/List/shuffle.html

Answer 2

Random cards
I built a full working example for you:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var imageNames = ["screen.png", "screen1.png", "screen2.png", "screen3.png", "screen4.png", "another_image.png"]; // you don't need to store the whole path
#override
void initState() {
imageNames.shuffle(); // shuffle your list of images
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView(
padding: EdgeInsets.all(16),
children: [
for (String imageName in imageNames) // iterate over your list
buildImageCard('assets/images/$imageName'),
]
)));
}
}
Widget buildImageCard(String imagePath) => Card( // from https://stackoverflow.com/a/66893064/3161139
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Column(
children: [
Stack(
children: [
Ink.image(
image: AssetImage(imagePath),
height: 240,
fit: BoxFit.cover,
),
Positioned(
bottom: 30,
right: 16,
left: 16,
child: Text(
'Interesting fact!',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 24,
),
),
),
],
),
],
),
);