[flutter] 플러터 GridView에서 아이템을 드래그앤드롭으로 이동하는 방법은?

18 Dec 2023

flutter

먼저, pubspec.yaml 파일에 flutter_reorderable_list 패키지를 추가해야 합니다.

dependencies:
  flutter_reorderable_list: ^0.1.4

그런 다음, 아래와 같이 Reorderable 위젯을 사용하여 GridView를 감싸면 됩니다.

import 'package:flutter/material.dart';
import 'package:flutter_reorderable_list/flutter_reorderable_list.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> {
  final _items = List.generate(10, (index) => 'Item $index');

  @override
  Widget build(BuildContext context) {
    return Reorderable(
      onReorder: (oldIndex, newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final item = _items.removeAt(oldIndex);
          _items.insert(newIndex, item);
        });
      },
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        ),
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ListTile(
            key: Key('$index'),
            title: Text(_items[index]),
          );
        },
      ),
    );
  }
}

이렇게 하면 Reorderable 위젯으로 GridView 아이템을 드래그하여 위치를 바꿀 수 있게 됩니다.