[Flutter] 리스트 순환 로직 구현하기

Flutter에서 리스트 순환 로직 구현하기
Flutter로 애플리케이션을 개발할 때, 여러 개의 리스트를 순환하며 각 리스트의 값을 선택해야 하는 경우가 있습니다. 이 글에서는 Dart 언어를 사용하여 리스트 순환 로직을 구현하는 방법을 자세히 설명하겠습니다.

1. 개요
   리스트 순환 로직의 핵심은 리스트의 현재 인덱스를 관리하고, 리스트의 끝에 도달했을 때 다시 처음으로 돌아가도록 만드는 것입니다. 이를 위해 다음과 같은 주요 개념을 이해해야 합니다:

리스트 인덱스 관리: 현재 선택된 리스트의 인덱스를 저장하는 변수.
인덱스 증가 및 초기화: 리스트의 끝에 도달했는지를 확인하고, 끝에 도달하면 인덱스를 처음으로 돌리는 로직.
2. 구현 예제
아래는 리스트 순환 로직을 구현한 Flutter 예제입니다. 이 예제에서는 여러 개의 리스트를 순환하며, 버튼 클릭 시 다음 리스트로 이동하고, 마지막 리스트에서는 다시 첫 번째 리스트로 돌아가는 로직을 구현합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ListCycle(),
    );
  }
}

class ListCycle extends StatefulWidget {
  @override
  _ListCycleState createState() => _ListCycleState();
}

class _ListCycleState extends State<ListCycle> {
  int currentListIndex = 0;  // 현재 리스트 인덱스
  List<List<String>> lists = [
    ['리스트 1 - 아이템 1', '리스트 1 - 아이템 2', '리스트 1 - 아이템 3'],
    ['리스트 2 - 아이템 1', '리스트 2 - 아이템 2', '리스트 2 - 아이템 3'],
    ['리스트 3 - 아이템 1', '리스트 3 - 아이템 2', '리스트 3 - 아이템 3'],
    ['리스트 4 - 아이템 1', '리스트 4 - 아이템 2', '리스트 4 - 아이템 3']
  ];

  void nextList() {
    setState(() {
      currentListIndex = (currentListIndex + 1) % lists.length;  // 리스트 인덱스 순환
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('리스트 순환 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(lists[currentListIndex][0], style: TextStyle(fontSize: 24)),  // 현재 리스트의 첫 번째 아이템 표시
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: nextList,
              child: Text('다음 리스트'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 주요 부분 설명
   리스트 인덱스 관리
   리스트의 현재 인덱스를 관리하기 위해 currentListIndex 변수를 사용합니다. 초기값은 0으로 설정되어 첫 번째 리스트가 선택되도록 합니다.

int currentListIndex = 0;

리스트 배열
lists 변수는 여러 개의 리스트를 담고 있는 배열입니다. 각 리스트는 문자열 아이템을 포함합니다.

List<List<String>> lists = [
  ['리스트 1 - 아이템 1', '리스트 1 - 아이템 2', '리스트 1 - 아이템 3'],
  ['리스트 2 - 아이템 1', '리스트 2 - 아이템 2', '리스트 2 - 아이템 3'],
  ['리스트 3 - 아이템 1', '리스트 3 - 아이템 2', '리스트 3 - 아이템 3'],
  ['리스트 4 - 아이템 1', '리스트 4 - 아이템 2', '리스트 4 - 아이템 3']
];

인덱스 증가 및 초기화
nextList 함수는 현재 리스트 인덱스를 증가시키고, 마지막 리스트에 도달하면 다시 첫 번째 리스트로 돌아가도록 합니다.

void nextList() {
  setState(() {
    currentListIndex = (currentListIndex + 1) % lists.length;  // 리스트 인덱스 순환
  });
}

이 로직의 핵심은 (currentListIndex + 1) % lists.length입니다. 여기서 모듈로 연산 %은 나머지를 반환하므로, 리스트의 인덱스가 리스트 길이와 같아질 때 0으로 초기화됩니다. 예를 들어, lists.length가 4인 경우, currentListIndex가 3에서 4로 증가하면, 4 % 4는 0이 되어 다시 첫 번째 리스트로 돌아갑니다.

상태 업데이트 및 UI 구성
setState 함수는 currentListIndex가 변경될 때마다 UI를 업데이트합니다. build 메서드에서는 현재 선택된 리스트의 첫 번째 아이템을 텍스트로 표시하고, 버튼을 클릭하면 nextList 함수가 호출됩니다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('리스트 순환 예제'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(lists[currentListIndex][0], style: TextStyle(fontSize: 24)),  // 현재 리스트의 첫 번째 아이템 표시
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: nextList,
            child: Text('다음 리스트'),
          ),
        ],
      ),
    );
  }
}

4. 결론
   Dart에서 리스트 순환 로직을 구현하는 것은 비교적 간단합니다. 리스트의 현재 인덱스를 관리하고, 모듈로 연산을 사용하여 인덱스를 증가 및 초기화함으로써 리스트의 끝에 도달했을 때 다시 처음으로 돌아가도록 만들 수 있습니다. 이 방법을 통해 다양한 상황에서 리스트를 효율적으로 순환할 수 있습니다.