EP.11 Reorderable List View Using Flutter

January 12, 2022

Overview

In todays blog I created a clean and simple UI for a TODO app which included reorderable list view using the ReorderableListView widget in Flutter.

Source Code

import 'package:flutter/material.dart';

class ReorderListView extends StatefulWidget {
  const ReorderListView({Key? key}) : super(key: key);

  @override
  _ReorderListViewState createState() => _ReorderListViewState();
}

class _ReorderListViewState extends State<ReorderListView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFFF2F6FE),
      appBar: AppBar(
        centerTitle: false,
        shadowColor: Colors.transparent,
        backgroundColor: Color(0xFFFF2F6FE),
        title: const Text(
          "My Tasks",
          style: TextStyle(
              fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black),
        ),
      ),
      body: ReorderableListView.builder(
        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
        itemCount: tasks.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            key: Key('$index'),
            padding: const EdgeInsets.all(5),
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 5),
              decoration: BoxDecoration(
                color: Colors.white,
                  boxShadow: [
                            BoxShadow(
                              color: Colors.grey.shade300,
                              spreadRadius: 1,
                              blurRadius: 2,
                              offset: const Offset(1, 2)
                            ),
                          ],
                  borderRadius: BorderRadius.circular(22),),
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          tasks[index].title,
                          style: const TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                        const Icon(Icons.drag_handle)
                      ],
                    ),
                    const SizedBox(height: 5,),
                    Text(tasks[index].dueDate,
                        style:  TextStyle(
                            fontSize: 14.5, fontWeight: FontWeight.w500, 
                            color: Colors.grey.shade500)),
                    const SizedBox(height: 5,),
                    Row(
                      children: [
                        Expanded(
                          child: LinearProgressIndicator(
                            backgroundColor: Colors.grey.shade400,
                            valueColor: const AlwaysStoppedAnimation(
                              Color(0xFFF4266F6),
                            ),
                            value: tasks[index].percentageComplete,
                          ),
                        ),
                        const SizedBox(
                          width: 12,
                        ),
                        Text(
                            '${(tasks[index].percentageComplete * 100).round()}%', style:  TextStyle(
                            fontSize: 14, fontWeight: FontWeight.w500, 
                            color: Colors.grey.shade500))
                      ],
                    )
                  ],
                ),
              ),
            ),
          );
        },
        onReorder: (int idx0, int idx1) {
          setState(() {
            if (idx0 < idx1) {
              idx1 -= 1;
            }
            final Task item = tasks.removeAt(idx0);
            tasks.insert(idx1, item);
          });
        },
      ),
    );
  }
}

class Task {
  final String title;
  final String dueDate;
  final double percentageComplete;

  Task(this.title, this.dueDate, this.percentageComplete);
}

final List<Task> tasks = [
  Task('Edit Proposal', 'Friday, 14th January 2022', 0.50),
  Task('Review Wireframes', 'Monday, 17th January 2022', 0.10),
  Task('Review Site', 'Wednesday, 19th January 2022', 0.20),
  Task('Presentation Prep', 'Thursday, 3rd February 2022', 0.30),
  Task('Blog Page', 'Monday, 7th February 2022', 0.40),
  Task('Complete Checkout Page', 'Monday, 7th February 2022', 0.70),
  Task('New Process Prototype', 'Tuesday, 15th March 2022', 0.80),
  Task('Design Mockups', 'Wednesday, 23rd March 2022', 0.90),
];