class MultiDropDown extends StatefulWidget {
const MultiDropDown({Key? key}) : super(key: key);
@override
State<MultiDropDown> createState() => _MultiDropDownState();
}
class _MultiDropDownState extends State<MultiDropDown> {
MultiSelectController _controller = MultiSelectController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Column(
children: [
MultiSelectDropDown(
showClearIcon: true,
controller: _controller,
onOptionSelected: (options) {
debugPrint(options.toString());
},
options: const <ValueItem>[
ValueItem(label: 'Option 1', value: '1'),
ValueItem(label: 'Option 2', value: '2'),
ValueItem(label: 'Option 3', value: '3'),
ValueItem(label: 'Option 4', value: '4'),
ValueItem(label: 'Option 5', value: '5'),
ValueItem(label: 'Option 6', value: '6'),
],
selectionType: SelectionType.multi,
chipConfig: const ChipConfig(wrapType: WrapType.scroll),
selectedOptions: [
ValueItem(label: 'Option 5', value: '5'),
ValueItem(label: 'Option 6', value: '6'),
],
selectedItemBuilder: (BuildContext context, List<ValueItem> selectedItems) {
// Implement your logic to build selected items if needed
return Container(child: Text('vgdh'),);
},
dropdownHeight: 300,
optionTextStyle: const TextStyle(fontSize: 16),
selectedOptionIcon: const Icon(Icons.check_circle),
),
],
),
);
}
}
多下拉菜单:^2.1.2
在此示例中,我想创建一个下拉按钮,通过它我们可以一次选择多个值。
我也想在水平行中显示这些多个选定的值。
在此代码中,所选视图在水平行中可见,但最近选择的值永远不会出现在前面。每次我们都必须在屏幕上滑动才能查看最近选择的值或名称。
请帮我修复它
您可以修改 selectedItemBuilder 方法:
selectedItemBuilder:(BuildContext上下文,列出selectedItems){ 返回容器( 身高:50, 孩子:ListView.builder( 滚动方向: Axis.horizontal, itemCount: selectedItems.length, itemBuilder: (BuildContext 上下文,int 索引) { ValueItem item = selectedItems[index] as ValueItem; bool recentSelection = index == selectedItems.length - 1;
return Padding(
padding: EdgeInsets.symmetric(horizontal: 4),
child: Chip(
label: Text(item.label),
backgroundColor: recentSelection ? Colors.blue : Colors.grey,
),
);
},
),
); },
this issue is solved using this code file
import 'package:aargus_shashi_1/charts/second_chart.dart';
import 'package:flutter/material.dart';
class DropDownSearch extends StatefulWidget {
const DropDownSearch({
super.key,
required this.title,
required this.textController,
required this.items,
});
final String title;
final TextEditingController? textController;
final List<String>? items;
@override
State<DropDownSearch> createState() => _DropDownSearchState();
}
class _DropDownSearchState extends State<DropDownSearch> {
bool _isTapped = false;
List<String> _filteredList = [];
List<String> _subFilteredList = [];
@override
initState() {
_filteredList = widget.items!;
_subFilteredList = _filteredList;
super.initState();
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.title,
style: const TextStyle(fontSize: 16, color: Color(0xFF858597)),
),
const SizedBox(height: 5),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
),
child: Column(
children: [
TextFormField(
controller: widget.textController,
onChanged: (val) {
setState(() {
_filteredList = _subFilteredList
.where((element) => element.toLowerCase().contains(
widget.textController!.text.toLowerCase()))
.toList();
});
},
validator: (val) =>
val!.isEmpty ? 'Field can\'t empty' : null,
style:
TextStyle(color: Colors.black, fontSize: 16.0),
onTap: () => setState(() => _isTapped = true),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
errorStyle: const TextStyle(fontSize: 0.01),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(
color: Colors.black,
style: BorderStyle.solid,
),
),
contentPadding:
const EdgeInsets.only(bottom: 10, left: 10),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: Colors.black.withOpacity(0.7),
width: 0.8)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: Colors.black.withOpacity(0.7),
width: 0.8)),
labelStyle: const TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: Colors.black.withOpacity(0.7), width: 0.8),
),
suffixIcon: Icon(Icons.arrow_drop_down, size: 25),
isDense: true,
),
),
_isTapped && _filteredList.isNotEmpty
? Container(
height: 150.0,
color: Colors.grey.shade200,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: ListView.builder(
itemCount: _filteredList.length,
itemBuilder: (context, index) {
return InkWell(
onTap: () {
setState(() => _isTapped = !_isTapped);
widget.textController!.text =
_filteredList[index];
setState(() {
});
},
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 8.0),
child: Text(_filteredList[index],
style: TextStyle(
color: Colors.grey.shade800,
fontSize: 16.0)),
),
);
},
),
)
: const SizedBox.shrink(),
],
))
]);
}
}