「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,はダークモードが効かなくなるので記述しない方が良い。
