[flutter] 플러터 GridView에서 아이템을 선택한 상태에서 해당 아이템을 드래그하여 이동하는 방법은?

18 Dec 2023

flutter

아래는 기본 아이템이 들어 있는 GridView 위에 ReorderableListView를 구현하는 방법입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reorderable GridView'),
        ),
        body: MyGridView(),
      ),
    );
  }
}

class MyGridView extends StatefulWidget {
  @override
  _MyGridViewState createState() => _MyGridViewState();
}

class _MyGridViewState extends State<MyGridView> {
  List<int> _items = List.generate(10, (index) => index);

  @override
  Widget build(BuildContext context) {
    return ReorderableListView(
      onReorder: (oldIndex, newIndex) {
        setState(() {
          if (newIndex > oldIndex) newIndex -= 1;
          final int item = _items.removeAt(oldIndex);
          _items.insert(newIndex, item);
        });
      },
      children: _items.map((int item) {
        return ListTile(
          key: ValueKey(item),
          title: Text('Item $item'),
        );
      }).toList(),
    );
  }
}

위 코드에서는 ReorderableListView를 사용하여 onReorder 이벤트 핸들러를 통해 아이템을 드래그하여 재정렬할 수 있습니다.

참고 자료:

Flutter ReorderableListView class