Posts

Implementasi Slideable List Item Pada Flutter

Bismillahirrahmanirrahim,

Assalammu’alaikum warahmatullahi wabarakatuh.

Hallo Sobat Uda semuanya. Postingan kali ini akan membahas tentang bagaimana mengimplementasikan slideable list item pada flutter. Iyaap slidebale list item ini kita akan membuat sebuah list item yang dapat digeser dengan memiliki beberapa aksi di dalamya, seperti aksi delete, share, more, maupun edit. Nah daripada penasaran, yuukk ikuti langkah kerja berikut ini:

  • Import Package flutter_slideable, jangan lupa untuk diklik packages get ya
flutter_slidable: "^0.4.7"
  • Selanjutnya kita akan membuat listitem dengan mengimplementasikan slideable pada list item tersebut
  • Import packages slideable pada class yang ingin kita tambahkan slide able
import 'package:flutter_slidable/flutter_slidable.dart';
  • Tambahkan codingan berikut ini:
body: Center(
  child: ListView(
    children: <Widget>[
      new Slidable(
      delegate: new SlidableDrawerDelegate(),
      actionExtentRatio: 0.25,
        child: new Container(
          color: Colors.white,
          child: new ListTile(
              leading: new CircleAvatar(
                radius: 50,
                backgroundColor: Colors.indigoAccent,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(100),
                    child: Image(
                      image:AssetImage("images/keripik.jpg") ,
                    )
                  ),
                foregroundColor: Colors.white,
              ),
            title: new Text('Keripik Balado', style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 24
            ),),
            subtitle: new Text('Level 1'),
          ),
        ),
       actions: <Widget>[
         new IconSlideAction(
            caption: 'Archive',
            color: Colors.blue,
            icon: Icons.archive,
             onTap: () {

             },
          ),
          new IconSlideAction(
            caption: 'Share',
            color: Colors.indigo,
            icon: Icons.share,
            onTap: () {

            },
          ),
        ],
        secondaryActions: <Widget>[
        new IconSlideAction(
          caption: 'More',
          color: Colors.black45,
          icon: Icons.more_horiz,
          onTap: () {

          },
        ),
        new IconSlideAction(
          caption: 'Delete',
          color: Colors.red,
          icon: Icons.delete,
          onTap: () {

          },
        ),
      ],
    ),
  
    ],
  ),
),
  • Kemudian copykan codingan di atas, untuk menambahkan beberapa list item lagi

Pada gambar di atas, saya menambahkan 3 item lagi, maka akan menghasilkan 4 item dalam sebuah list

  • Jika aplikasi dijalankan, maka akan tampil sebagai berikut:

Jika list item di geser ke kanan, maka aka tampil tampilan berikut ini:

Jika list ite di geser ke kiri, maka akan muncul tampilan berikut

Sekian postingan kali ini, semoga bermanfaat..

Leave a Reply :

* Your email address will not be published.