[flutter] 플러터 ReorderableListView 사용법

ListView 사용법

SingleChildScrollView 사용법

ReorderableListView

1.  ReorderableListView란?

리스트뷰에서 항목의 순서를 재배치할 수 있는 기능을 제공합니다. 이 위젯은 사용자가 리스트 항목을 길게 누르고 드래그하여 순서를 변경할 수 있게 해주는 기능을 가지고 있습니다. 사용자가 리스트 항목의 순서를 쉽게 변경할 수 있어 유연한 사용자 경험을 제공합니다.

 

 

2.  가장 기본적인 예제 코드

* ReorderableListView는 stateful 이어야 합니다. 

import 'package:flutter/material.dart';

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

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

class MyReorderableListView extends StatefulWidget {
  @override
  _MyReorderableListViewState createState() => _MyReorderableListViewState();
}

class _MyReorderableListViewState extends State<MyReorderableListView> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      rderableListView(
        children: [
          for (final item in items)
            ListTile(
              key: Key(item),
              title: Text(item),
            ),
        ],
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            if (oldIndex < newIndex) {
              newIndex -= 1;
            }
            final item = items.removeAt(oldIndex);
            items.insert(newIndex, item);
          });
        },
      ),
    );
  }
}

 

3. builder를 사용한 방법

import 'package:flutter/material.dart';

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

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

class MyReorderableListView extends StatefulWidget {
  @override
  _MyReorderableListViewState createState() => _MyReorderableListViewState();
}

class _MyReorderableListViewState extends State<MyReorderableListView> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ReorderableListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return ReorderableWidget(
            key: Key(item),
            child: ListTile(
              title: Text(item),
            ),
          );
        },
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            if (oldIndex < newIndex) {
              newIndex -= 1;
            }
            final item = items.removeAt(oldIndex);
            items.insert(newIndex, item);
          });
        },
      ),
    );
  }
}

class ReorderableWidget extends StatelessWidget {
  final Key key;
  final Widget child;

  ReorderableWidget({required this.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return KeyedSubtree(
      key: key,
      child: child,
    );
  }
}