「Flutter/外部ライブラリ/slidable」の版間の差分
提供: 初心者エンジニアの簡易メモ
(ページの作成:「==slidableとは== *リスト時にスワイプで、ボタンを出す。 *リストから削除ボタンを出すなど。 ==使い方== pubspec.yaml dependencies:...」) |
(→使い方) |
||
(同じ利用者による、間の1版が非表示) | |||
行6: | 行6: | ||
pubspec.yaml | pubspec.yaml | ||
dependencies: | dependencies: | ||
− | flutter_slidable: | + | 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,はダークモードが効かなくなるので記述しない方が良い。