はじめに
Listをスライドすることで削除出来るような処理を作ろうと調べたので、それをまとめていこうと思います。
この記事で分かること
- Dismissibleの使い方
- DismissDirectionの方向性
目次
- 普通のList
- Dismissibleを使用
- DismissDirectionの方向を確認する
- Listを縦スクロール
- Listを横スクロール
1．普通のList
ここでの普通のListとは
- リストをただ単に並べただけ
- タップしたり、横にスライドさせることは出来ない
- 最低限のものとする
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<int> items = List<int>.generate(100, (int index) => index);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(
'Item ${items[index]}',
),
);
},
),
);
}
}
これを元に処理を追加していく
2．Dismissibleを使用
こちらに詳しく載っているので、良ければご覧ください。
ListTileをDismissibleで囲む
class _HomePageState extends State<HomePage> {
List<int> items = List<int>.generate(100, (int index) => index);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return Dismissible(
key: Key(items.toString()),
onDismissed: (DismissDirection direction) {
setState(() {
items.removeAt(index);
});
},
background: Container(
color: Colors.red,
),
child: ListTile(
title: Text(
'Item ${items[index]}',
),
),
);
},
),
);
}
}
Dismissibleで追記したこと
- key
- リストの中の1部を指定するため
- onDismissed
- リストを削除するため
- background
- リストをスライドした時に見える背景色を指定するため
3．DismissDirectionの方向を確認する
DismissDirectionで方向を指定することが可能
3.1 Listを縦スクロール
- Listを縦スクロール
-
scrollDirection: Axis.verticalを指定
-
- スライド方向は横のみ
-
direction: DismissDirection.horizontalを指定
-
- スライド方向の指定
-
DismissDirection.startToEndの場合- 「左から右」へのスライド
-
DismissDirection.endToStartの場合- 「右から左」へのスライド
-
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: ListView.builder(
itemCount: items.length,
scrollDirection: Axis.vertical, // リストのスクロール方向を縦に
itemBuilder: (BuildContext context, int index) {
return Dismissible(
direction: DismissDirection.horizontal, // スライド方向を横に
key: Key(items.toString()),
onDismissed: (DismissDirection direction) {
setState(() {
items.removeAt(index);
});
if (direction == DismissDirection.startToEnd) {
// 左から右
print('StartToEnd');
} else if (direction == DismissDirection.endToStart) {
// 右から左
print('EndToStart');
}
},
background: Container(
color: Colors.red,
),
child: ListTile(
title: Text(
'Item ${items[index]}',
),
),
);
},
),
);
}
3.2 Listを横スクロール
- Listを横スクロール
-
scrollDirection: Axis.horizontalを指定 - widthの大きさを指定しないとエラーが出る
-
- スライド方向は縦のみ
-
direction: DismissDirection.verticalを指定
-
- スライド方向の指定
-
DismissDirection.upの場合- 「下から上」へのスライド
-
DismissDirection.downの場合- 「上から下」へのスライド
-
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: ListView.builder(
itemCount: items.length,
scrollDirection: Axis.horizontal, // リストのスクロール方向を横に
itemBuilder: (BuildContext context, int index) {
return Dismissible(
direction: DismissDirection.vertical, // スライド方向を縦に
key: Key(items.toString()),
onDismissed: (DismissDirection direction) {
setState(() {
items.removeAt(index);
});
if (direction == DismissDirection.up) {
// 下から上
print('Up');
} else if (direction == DismissDirection.down) {
// 上から下
print('Down');
}
},
background: Container(
color: Colors.red,
),
child: Container(
width: 100, // 横方向の大きさを指定
child: ListTile(
title: Text(
'Item ${items[index]}',
),
),
),
);
},
),
);
}
参考資料
おわりに
ここまで読んでいただき、ありがとうございました。
何かありましたらコメントをお願いします。