Перемешать карточки в FlipCard

Есть ряд карточек (150 штук) реализованных через FlipCard. Так вот нужно сделать так, чтобы они при запуске приложения всегда были перетасованы рандомно.

import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';

class Lessons extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(title: Text('Lessons')),
  body: Container(
    child: ListView(
      children: [
        Container(
          height: 100.0,
          width: 100.0,
          child: FlipCard(
            direction: FlipDirection.HORIZONTAL, // default
            front: Container(
              decoration: BoxDecoration(color: Colors.red),
              child: Text('Front'),
            ),
            back: Container(
              decoration: BoxDecoration(color: Colors.yellow),
              child: Text('Back'),
            ),
          ),
        ),
        Container(
          height: 100.0,
          width: 100.0,
          child: FlipCard(
            direction: FlipDirection.HORIZONTAL, // default
            front: Container(
              decoration: BoxDecoration(color: Colors.red),
              child: Text('Front'),
            ),
            back: Container(
              decoration: BoxDecoration(color: Colors.yellow),
              child: Text('Back'),
            ),
          ),
        ),
        Container(
          height: 100.0,
          width: 100.0,
          child: FlipCard(
            direction: FlipDirection.HORIZONTAL, // default
            front: Container(
              decoration: BoxDecoration(color: Colors.red),
              child: Text('Front'),
            ),
            back: Container(
              decoration: BoxDecoration(color: Colors.yellow),
              child: Text('Back'),
            ),
          ),
        ),
        Container(
          height: 100.0,
          width: 100.0,
          child: FlipCard(
            direction: FlipDirection.HORIZONTAL, // default
            front: Container(
              decoration: BoxDecoration(color: Colors.red),
              child: Text('Front'),
            ),
            back: Container(
              decoration: BoxDecoration(color: Colors.yellow),
              child: Text('Back'),
            ),
          ),
        ),
      ],
    ),
  ),
);
}
}

Код для примера, повторюсь, нужно сделать так, чтобы Container всегда были в рандомном порядке.

Понимаю, что нужно делать как-то через shuffle, но не получилось.


Ответы (1 шт):

Автор решения: MiT
import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';

class Lessons extends StatelessWidget {
  final cards = [
    Container(
      height: 100.0,
      width: 100.0,
      child: FlipCard(
        direction: FlipDirection.HORIZONTAL, // default
        front: Container(
          decoration: BoxDecoration(color: Colors.red),
          child: Text('Front'),
        ),
        back: Container(
          decoration: BoxDecoration(color: Colors.yellow),
          child: Text('Back'),
        ),
      ),
    ),
    Container(
      height: 100.0,
      width: 100.0,
      child: FlipCard(
        direction: FlipDirection.HORIZONTAL, // default
        front: Container(
          decoration: BoxDecoration(color: Colors.red),
          child: Text('Front'),
        ),
        back: Container(
          decoration: BoxDecoration(color: Colors.yellow),
          child: Text('Back'),
        ),
      ),
    ),
    Container(
      height: 100.0,
      width: 100.0,
      child: FlipCard(
        direction: FlipDirection.HORIZONTAL, // default
        front: Container(
          decoration: BoxDecoration(color: Colors.red),
          child: Text('Front'),
        ),
        back: Container(
          decoration: BoxDecoration(color: Colors.yellow),
          child: Text('Back'),
        ),
      ),
    ),
    Container(
      height: 100.0,
      width: 100.0,
      child: FlipCard(
        direction: FlipDirection.HORIZONTAL, // default
        front: Container(
          decoration: BoxDecoration(color: Colors.red),
          child: Text('Front'),
        ),
        back: Container(
          decoration: BoxDecoration(color: Colors.yellow),
          child: Text('Back'),
        ),
      ),
    ),
  ]..shuffle();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Lessons')),
      body: Container(
        child: ListView(children: cards),
      ),
    );
  }
}
→ Ссылка