I'm trying to use the multiselect package on pub.dev and i realized that the chip choice is what i'm gonna need, i decided to test out the example given on the latest version, and i basically copy pasted the code (with understanding it ofc) but it keeps giving me this error!
then I even opted to make the "values" of the onTap (List) but it gives error afterwards.
here's my code:
class _MyHomePageState extends State<MyHomePage> {
static List<Animal> _animals = [
Animal(id: 1, name: "Lion"),
Animal(id: 2, name: "Flamingo"),
Animal(id: 3, name: "Hippo"),
................
];
final _items = _animals
.map((animal) => MultiSelectItem<Animal>(animal, animal.name))
.toList();
List<Animal> _selectedAnimals = [];
final _multiSelectKey = GlobalKey<FormFieldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Container(
child: Column(children: <Widget>[
MultiSelectChipField<Animal>(
items: _items,
initialValue: [_animals[4], _animals[7], _animals[9]],
title: Text("Animals"),
headerColor: Colors.blue.withOpacity(0.5),
decoration: BoxDecoration(
border: Border.all(color: Colors.blue.shade700, width: 1.8),
),
selectedChipColor: Colors.blue.withOpacity(0.5),
selectedTextStyle: TextStyle(color: Colors.blue[800]),
//this is where my error is:
onTap: (values) {
_selectedAnimals = values;
},
),
SizedBox(height: 40),
]),
),
),
);
}
}
CodePudding user response:
You're right, the provided example does not work.
You have to specify correct type Animal?
at several place.
Please see the following code:
import 'package:flutter/material.dart';
import 'package:multi_select_flutter/multi_select_flutter.dart';
class Animal {
final int id;
final String name;
const Animal({required this.id, required this.name});
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
static final List<Animal> _animals = [
const Animal(id: 1, name: 'Lion'),
const Animal(id: 2, name: 'Flamingo'),
const Animal(id: 3, name: 'Hippo'),
const Animal(id: 4, name: 'Horse'),
];
final _items = _animals
.map((animal) => MultiSelectItem<Animal?>(animal, animal.name)) // Either write Animal? here
.toList();
List<Animal?> _selectedAnimals = [];
@override
Widget build(BuildContext context) {
return Scaffold(
body: MultiSelectChipField<Animal?>( // or write Animal? here
items: _items,
initialValue: [
_animals[0],
_animals[1],
],
title: const Text('Animals'),
headerColor: Colors.blue.withOpacity(0.5),
decoration: BoxDecoration(
border: Border.all(color: Colors.blue.shade700, width: 1.8),
),
selectedChipColor: Colors.blue.withOpacity(0.5),
selectedTextStyle: TextStyle(color: Colors.blue[800]),
//this is where my error is:
onTap: (List<Animal?> values) { // You apparently have to specify the type here as well
setState(() {
_selectedAnimals = values;
});
},
),
);
}
}
PS: It helps if you provide a full working example as code snippet. E.g. I had to add the Animal
class myself and complete the stateful widget boilerplate to get it running.