EP.10 Slide to Reveal Options in List View Using Flutter

January 11, 2022
Overview

Today we look at the Flutter slidable library and use it to create a messages app UI
Source Code

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

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

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

class _SwippableListState extends State<SwippableList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFFF128C7E),
        shadowColor: Colors.transparent,
        title: const Text(
          "Messages",
          style: TextStyle(
              fontSize: 22, color: Colors.white, fontWeight: FontWeight.bold),
        ),
        centerTitle: false,
        actions: const [
          Icon(
            Icons.search,
            color: Colors.white,
          ),
          SizedBox(
            width: 20,
          ),
          Icon(
            Icons.more_vert,
            color: Colors.white,
          ),
          SizedBox(
            width: 15,
          ),
        ],
      ),
      backgroundColor: Colors.white,
      floatingActionButton: FloatingActionButton(
        onPressed: () => {},
        backgroundColor: Color(0xFFF128C7E),
        child: const Icon(Icons.chat),
      ),
      body: Container(
        alignment: Alignment.center,
        child: ListView.builder(
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.only(bottom: 10),
            child: Slidable(
              key: ValueKey(index),
              endActionPane: ActionPane(
                motion: const ScrollMotion(),
                dismissible: DismissiblePane(onDismissed: () {}),
                children: const [
                  SlidableAction(
                    onPressed: shareItem,
                    backgroundColor: Color(0xFFF075E54),
                    foregroundColor: Colors.white,
                    icon: Icons.share,
                    label: 'Share',
                  ),
                  SlidableAction(
                    onPressed: deleteItem,
                    backgroundColor: Colors.red,
                    foregroundColor: Colors.white,
                    icon: Icons.delete,
                    label: 'Delete',
                  ),
                ],
              ),
              child: ListTile(
                leading: CircleAvatar(
                  backgroundImage:
                      NetworkImage(messages[index].profileImageUrl),
                  radius: 25,
                ),
                trailing: Text(
                  messages[index].readAt,
                  style: const TextStyle(fontSize: 13, color: Colors.grey),
                ),
                title: Text(
                  messages[index].username,
                  style: const TextStyle(
                      fontSize: 18,
                      color: Colors.black,
                      fontWeight: FontWeight.bold),
                ),
                subtitle: Row(
                  children: [
                    const Icon(
                      Icons.check,
                      size: 20,
                      color: Colors.grey,
                    ),
                    const SizedBox(
                      width: 5,
                    ),
                    Expanded(
                      child: Text(
                        messages[index].lastMessage,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: const TextStyle(
                          fontSize: 14,
                          color: Colors.grey,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          itemCount: messages.length,
        ),
      ),
    );
  }
}

void deleteItem(BuildContext context) {
  // perform delete action here
}
void shareItem(BuildContext context) {
  // perform share action here
}

class Message {
  final String username;
  final String profileImageUrl;
  final String lastMessage;
  final String readAt;

  Message(this.username, this.profileImageUrl, this.lastMessage, this.readAt);
}

final List<Message> messages = [
  Message(
      'John Snow',
      'https://cdn.pixabay.com/photo/2019/04/19/13/44/john-snow-4139536_960_720.jpg',
      'I don\'t want it',
      '2021-02-12'),
  Message(
      'Ned Stark',
      'https://images.unsplash.com/photo-1640020374654-ec88277ef55e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8RnpvM3p1T0hONnd8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60',
      'Winter is coming',
      '2021-11-21'),
  Message(
      'Khaleesi',
      'https://cdn.pixabay.com/photo/2019/03/26/08/47/daenerys-targaryen-4082038_960_720.jpg',
      'I am the one true Queen',
      '2021-10-14'),
  Message(
      'Cersie Lannister',
      'https://images.unsplash.com/photo-1601841981137-966f4a2f8084?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8dG93ZXJ8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60',
      'Every breath you draw in my presence annoys me.',
      '2021-04-08'),
  Message(
      'Arya Stark',
      'https://images.unsplash.com/photo-1585943766731-05822da58574?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Z2FtZSUyMG9mJTIwdGhyb25lc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
      'Fear cuts deeper than swords',
      '2020-10-12'),
  Message(
      'Hodor',
      'https://images.unsplash.com/photo-1550684393-8e0b1468ca57?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8ZG9vcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
      'I held the door',
      '2021-12-27'),
  Message(
      'Sansa',
      'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
      'The lone wolf dies but the pack survives',
      '2021-11-09'),
  Message(
      'Night King',
      'https://images.unsplash.com/photo-1444146085469-2a4ef5a7e5fb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8em9tYmllfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
      'Keep that dragon glass away',
      '2021-09-29'),
];