facebook twitter hatena line email

「Flutter/外部ライブラリ/slidable」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「==slidableとは== *リスト時にスワイプで、ボタンを出す。 *リストから削除ボタンを出すなど。 ==使い方== pubspec.yaml dependencies:...」)
 
(使い方)
 
(同じ利用者による、間の1版が非表示)
行6: 行6:
 
pubspec.yaml
 
pubspec.yaml
 
  dependencies:
 
  dependencies:
   flutter_slidable: "^0.4.9"
+
   flutter_slidable: ^0.4.9
  
 
lib/home/list.dart
 
lib/home/list.dart
行22: 行22:
 
               actionExtentRatio: 0.25,
 
               actionExtentRatio: 0.25,
 
               child: new Container(
 
               child: new Container(
                   color: Colors.white,
+
                   // color: Colors.white,
 
                   child: new ListTile(
 
                   child: new ListTile(
 
                     leading: new CircleAvatar(
 
                     leading: new CircleAvatar(
行67: 行67:
 
  );
 
  );
  
 +
color: Colors.white,はダークモードが効かなくなるので記述しない方が良い。
  
 
==参考==
 
==参考==
 
https://pub.dartlang.org/packages/flutter_slidable
 
https://pub.dartlang.org/packages/flutter_slidable

2019年12月6日 (金) 00:02時点における最新版

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