介绍一款下拉框多选插件
multi_select_flutter: ^4.0.0
https://github.com/CHB61/multi_select_flutter
使用
class SelectMoreDropDemo extends StatefulWidget {
const SelectMoreDropDemo({Key key}) : super(key: key);
@override
_SelectMoreDropDemoState createState() => _SelectMoreDropDemoState();
}
class _SelectMoreDropDemoState extends State<SelectMoreDropDemo> {
List<Elements> _element = [
Elements(id: 1, name: "A"),
Elements(id: 2, name: "B"),
Elements(id: 3, name: "C"),
Elements(id: 4, name: "D"),
Elements(id: 5, name: "E"),
Elements(id: 6, name: "F"),
Elements(id: 7, name: "G"),
Elements(id: 8, name: "H"),
];
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: Column(
children: [
SizedBox(height: 40),
MultiSelectDialogField(
items: _element
.map((animal) => MultiSelectItem<Elements>(animal, animal.name))
.toList(),
title: Text("demo"),
selectedColor: Colors.blue,
cancelText: Text('取消'),
confirmText: Text('确定'),
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.1),
borderRadius: BorderRadius.all(Radius.circular(40)),
border: Border.all(
color: Colors.blue,
width: 2,
),
),
buttonIcon: Icon(
Icons.pets,
color: Colors.blue,
),
buttonText: Text(
"demo",
style: TextStyle(
color: Colors.blue[800],
fontSize: 16,
),
),
onConfirm: (item) {
},
),
],
),
),
);
}
}
class Elements {
final int id;
final String name;
Elements({
this.id,
this.name,
});
}
本文只介绍了其中一款基本样式,喜欢其他样式的可以Git查阅下