[英]How to pass a list of maps as inital value to the FormBuilderFilterChip in flutter_form_builder package?
I have tried passing a list of the same 'value' field of the FormBuilderFieldOption to the initialValue argument.我尝试将FormBuilderFieldOption的相同“值”字段的列表传递给initialValue参数。
Edit: Passing the list satisfies the 'required' validator but does not show the chips as 'marked'编辑:通过列表满足“必需”验证器,但不会将筹码显示为“标记”
Now if i'm not wrong this should return a set of chips that are all marked, but it does not.现在,如果我没记错的话,这应该返回一组全部标记的芯片,但事实并非如此。
List<Map<String,dynamic>> _allValues = [
{id: 1586762938154, name: 202, rate: 5000, type: 'ABYSS'},
{id: 1586759232569, name: 101, rate: 1000, type: 'DELUXE'},
{id: 1586849439323, name: 13, rate: 3434, type: 'DELUXE'},
{id: 1586759258120, name: 102, rate: 2000, type: 'EXECUTIVE'},
{id: 1586779416843, name: 103, rate: 2343, type: 'EXECUTIVE'},
]
FormBuilderFilterChip(
initialValue: _allValues.map((value) => value).toList(),
attribute: 'filter_chip',
decoration: InputDecoration(
labelText: 'Select many options',
),
options: _allValues
.map((val) => FormBuilderFieldOption(
value: val,
child: Text(val['name']),
),
).toList(),
onChanged: (value) {
_selected = value;
print(_selected);
},
)
You can copy paste run full code below您可以在下面复制粘贴运行完整代码
Assume _allValues
is List<Map<String, String>>
假设
_allValues
是List<Map<String, String>>
code snippet代码片段
List<Map<String, String>> _allValues = [
{"name": "abc"},
{"name": "def"},
{"name": "123"}
];
FormBuilderFilterChip(
initialValue:
_allValues.map((value) => value['name']).toList(),
attribute: 'filter_chip',
decoration: InputDecoration(
labelText: 'Select many options',
),
options: _allValues
.map(
(val) => FormBuilderFieldOption(
value: val['name'],
child: Text(val['name']),
),
)
.toList(),
working demo工作演示
full code完整代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter FormBuilder Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
inputDecorationTheme: InputDecorationTheme(
labelStyle: TextStyle(color: Colors.purple),
),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
MyHomePageState createState() {
return MyHomePageState();
}
}
class Data {
String name;
Data(this.name);
}
class MyHomePageState extends State<MyHomePage> {
var data;
bool autoValidate = true;
bool readOnly = false;
bool showSegmentedControl = true;
final GlobalKey<FormBuilderState> _fbKey = GlobalKey<FormBuilderState>();
final GlobalKey<FormFieldState> _specifyTextFieldKey =
GlobalKey<FormFieldState>();
ValueChanged _onChanged = (val) => print(val);
var genderOptions = ['Male', 'Female', 'Other'];
List<Map<String, String>> _allValues = [
{"name": "abc"},
{"name": "def"},
{"name": "123"}
];
List<dynamic> _selected;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FormBuilder Example"),
),
body: Padding(
padding: EdgeInsets.all(10),
child: SingleChildScrollView(
child: Column(children: <Widget>[
FormBuilder(
// context,
key: _fbKey,
autovalidate: true,
initialValue: {
'movie_rating': 5,
},
readOnly: false,
child: Column(
children: <Widget>[
FormBuilderFilterChip(
initialValue: ["Test 1", "Test 3"],
attribute: 'filter_chip',
decoration: InputDecoration(
labelText: 'Select many options',
),
options: [
FormBuilderFieldOption(
value: 'Test', child: Text('Test')),
FormBuilderFieldOption(
value: 'Test 1', child: Text('Test 1')),
FormBuilderFieldOption(
value: 'Test 2', child: Text('Test 2')),
FormBuilderFieldOption(
value: 'Test 3', child: Text('Test 3')),
FormBuilderFieldOption(
value: 'Test 4', child: Text('Test 4')),
],
),
FormBuilderFilterChip(
initialValue:
_allValues.map((value) => value['name']).toList(),
attribute: 'filter_chip',
decoration: InputDecoration(
labelText: 'Select many options',
),
options: _allValues
.map(
(val) => FormBuilderFieldOption(
value: val['name'],
child: Text(val['name']),
),
)
.toList(),
onChanged: (value) {
_selected = value;
print(_selected);
},
)
],
),
),
]),
)));
}
}
I took a look under the hood and how the FormBuilderFilterChip marks the chips as selected is by using the List.contains() method.我看了看, FormBuilderFilterChip是如何使用List.contains()方法将芯片标记为选中的。
In this method the equality used to determine whether [element] is equal to an element of the List defaults to the [Object.==] of the element.在此方法中,用于确定 [element] 是否等于 List 的元素的相等性默认为元素的 [Object.==]。
So to tackle this i built my own custom FilterChipField (borrowing most of the necessary code from the FormBuilderFilterChip)因此,为了解决这个问题,我构建了自己的自定义 FilterChipField(从 FormBuilderFilterChip 中借用了大部分必要的代码)
FormBuilderCustomField(
attribute: "name",
validators: [
FormBuilderValidators.required(),
],
formField: FormField(
enabled: true,
builder: (FormFieldState<dynamic> field) {
return InputDecorator(
decoration: InputDecoration(
prefixIcon: Icon(Icons.vpn_key),
labelText: "Assign Room(s)",
contentPadding: EdgeInsets.only(top: 10.0, bottom: 0.0),
errorText: field.errorText,
),
child: Container(
child: _buildChipSelectField(field),
),
);
},
),
)
The _buildChipSelectField below contains two custom functions one ( _selectedValuesContains ) to check the equality of the object in the lists and second ( _selectedValuesRemove ) to remove the object on toggling the chip下面的_buildChipSelectField包含两个自定义函数,一个 ( _selectedValuesContains ) 用于检查列表中 object 的相等性,第二个 ( _selectedValuesRemove ) 用于在切换芯片时删除 object
Widget _buildChipSelectField(FormFieldState<dynamic> field) {
return Wrap(
spacing: 3.0,
children: _allValues.map((item) {
return FilterChip(
label: Text("${item['name']} - ${item['type']}"),
selectedColor: Colors.black38,
selected: _selectedValuesContains(item),
onSelected: (value) {
setState(() {
if (_selectedValuesContains(item)) {
_selectedValuesRemove(item);
} else {
_selectedValues.add(item);
}
field.didChange(_selectedValues);
});
},
);
}).toList(),
);
}
(These methods are for my sample data (ie _allValues), but the idea is very basic in nature.) (这些方法适用于我的示例数据(即 _allValues),但这个想法本质上是非常基本的。)
_selectedValuesContains _selectedValuesContains
bool _selectedValuesContains(Map item) {
int index = _selectedValues.indexWhere((val) => val['id'] == item['id']);
return index >= 0 ? true : false;
}
_selectedValuesRemove _selectedValuesRemove
void _selectedValuesRemove(Map item) {
int index = _selectedValues.indexWhere((val) => val['id'] == item['id']);
_selectedValues.removeAt(index);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.