[flutter] 플러터 GridView에서 아이템의 순서를 랜덤하게 섞는 방법은?

18 Dec 2023

flutter

플러터에서 GridView를 사용할 때, 아이템의 순서를 랜덤하게 섞고 싶을 때가 있을 겁니다. 이를 위해 두 가지 방법을 사용할 수 있습니다.

1. List를 랜덤하게 섞어서 GridView에 매핑

가장 간단한 방법은 아이템이 담긴 List를 랜덤하게 섞은 뒤, GridView에 매핑하는 것입니다.

import 'dart:math';

void main() {
  List<String> items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];

  items.shuffle(); // 리스트를 랜덤하게 섞음

  runApp(
    MaterialApp(
      home: Scaffold(
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return Center(
              child: Text(items[index]),
            );
          },
        ),
      ),
    ),
  );
}

2. GridView의 순서를 랜덤하게 섞는 커스텀 위젯을 만들기

두 번째 방법은 GridView의 순서를 랜덤하게 섞는 커스텀 위젯을 만드는 것입니다.

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

class RandomizedGridView extends StatelessWidget {
  final List<String> items;

  RandomizedGridView({required this.items});

  @override
  Widget build(BuildContext context) {
    items.shuffle(); // 리스트를 랜덤하게 섞음

    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: items.length,
      itemBuilder: (BuildContext context, int index) {
        return Center(
          child: Text(items[index]),
        );
      },
    );
  }
}

void main() {
  List<String> items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];

  runApp(
    MaterialApp(
      home: Scaffold(
        body: RandomizedGridView(items: items),
      ),
    ),
  );
}

어떤 방법을 선택하든, GridView에서 아이템의 순서를 랜덤하게 섞어 보세요!