facebook twitter hatena line email

Flutter/外部ライブラリ/slidable

提供: 初心者エンジニアの簡易メモ
移動: 案内検索

slidableとは

  • リスト時にスワイプで、ボタンを出す。
  • リストから削除ボタンを出すなど。

使い方

pubspec.yaml

dependencies:
 flutter_slidable: ^0.4.9

lib/home/list.dart

import 'package:flutter_slidable/flutter_slidable.dart';
return Scaffold(
     appBar: AppBar(
       title: Text("$widget.title"),
     ),
     body: ListView.builder(
       itemCount: articles.length,
       itemBuilder: (context, int index) {
         return InkWell(
           child: new Slidable(
             delegate: new SlidableDrawerDelegate(),
             actionExtentRatio: 0.25,
             child: new Container(
                 // color: Colors.white,
                 child: new ListTile(
                   leading: new CircleAvatar(
                     backgroundColor: Colors.indigoAccent,
                     child: new Text(index),
                     foregroundColor: Colors.white,
                   ),
                   title: new Text('title${index}'),
                   subtitle: new Text('sub${index}'),
                 ),
             ),
             actions: <Widget>[
               new IconSlideAction(
                 caption: 'Archive',
                 color: Colors.blue,
                 icon: Icons.archive,
                 //onTap: () => _showSnackBar('Archive'),
               ),
               new IconSlideAction(
                 caption: 'Share',
                 color: Colors.indigo,
                 icon: Icons.share,
                 //onTap: () => _showSnackBar('Share'),
               ),
             ],
             secondaryActions: <Widget>[
               new IconSlideAction(
                 caption: 'Delete',
                 color: Colors.red,
                 icon: Icons.delete,
                 onTap: () {
                 // 略
                   });
                 }
               ),
             ],
           ),
           onTap:() {
             _click();
             }
         );
       },
     ),
);

color: Colors.white,はダークモードが効かなくなるので記述しない方が良い。

参考

https://pub.dartlang.org/packages/flutter_slidable