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

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

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,
              ),
            ),
          ),
        ],
      ),
    ],
  ),
);

Answer 2

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