ReorderableListViewExample

reorderable_list_view_example.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Starter',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: StarterPage(),
    );
  }
}

class StarterPage extends StatefulWidget {
  @override
  State<StarterPage> createState() => _StarterPageState();
}

class _StarterPageState extends State<StarterPage> {
  final List<String> _list = [
    'List Item 1',
    'List Item 2',
    'List Item 3',
    'List Item 4',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ReorderableListView Example'),
      ),
      body: ReorderableListView(
        padding: const EdgeInsets.symmetric(vertical: 20),
        onReorder: (int oldIndex, int newIndex) {
          if (newIndex > oldIndex) {
            newIndex -= 1;
          }
          setState(() {
            final String _item = _list.removeAt(oldIndex);
            _list.insert(newIndex, _item);
          });
        },
        children: List.generate(
          _list.length,
          (index) => Container(
            width: double.infinity,
            key: ValueKey(index),
            padding: const EdgeInsets.all(20),
            margin: const EdgeInsets.symmetric(vertical: 5),
            color: Colors.teal.withOpacity(0.2),
            child: Text(
              _list[index],
              style: Theme.of(context).textTheme.headline6,
            ),
          ),
        ),
      ),
    );
  }
}