Flitter: Display chosen item from list - ios

Question

So I got some cars with all the technical data (top speed, horsepower, etc.) saved in my backend and my app gets all this data. Like you can see in my first screenshot (SC1) the user chooses what kind of car he is looking for and when he presses on this yellow button a bottomsheet appears (SC2) (SC3) and he can select the different characteristics of the car.
What I'm trying to achieve is that the item which was chosen by the user is displayed when he closes the bottomsheet again. So basically it shall be displayed what was chosen, for example on (SC1) right behind the text "Brand", "Price", etc.
This is the code of the first Screenshot (SC1):
class SearchTab extends StatefulWidget {
const SearchTab({Key key}) : super(key: key);
#override
_SearchTabState createState() => _SearchTabState();
}
class _SearchTabState extends State<SearchTab> {
ScrollController _scrollController;
#override
void initState() {
_scrollController = ScrollController();
super.initState();
}
bool _more = false;
#override
Widget build(BuildContext context) {
final FilterProvider filterProvider = Provider.of<FilterProvider>(context);
return filterProvider.isLoading // --- DAS WAR DAVOR DA! ---
? Container(
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xffFEFDFD),
Color(0xffBDBDB2),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Center(
child: CupertinoActivityIndicator(
// CircularProgressIndicator(
// color: Colors.grey,
// ),
),
),
)
: Container(
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffFEFDFD), Color(0xffBDBDB2)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0,
0), //Original: const EdgeInsets.fromLTRB(15, 20, 15, 0),
child: Scrollbar(
controller: _scrollController,
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
controller: _scrollController,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
children: <Widget>[
FilterButtonWidget(
title: 'Brand',
item: constants.brand,
type: 'brand',
),
FilterButtonWidget(
title: 'Price',
item: constants.price,
type: 'price',
),
FilterButtonWidget(
title: 'Engine Power [kW]',
item: constants.enginepower,
type: 'engine',
),
FilterButtonWidget(
title: 'Range',
item: constants.range,
type: 'range',
),
FilterButtonWidget(
title: 'Battery [kWh]',
item: constants.battery,
type: 'battery',
),
FilterButtonWidget(
title: 'Loading Power [kW]',
item: constants.chargingpower,
type: 'charging',
),
FilterButtonWidget(
title: 'Top speed',
item: constants.topspeed,
type: 'top',
),
GestureDetector(
onTap: () {
setState(() => _more = !_more);
_scrollController.animateTo(
_more
? _scrollController.offset +
MediaQuery.of(context).size.height * .3
: _scrollController
.position.minScrollExtent,
curve: _more ? Curves.easeIn : Curves.easeOut,
duration: const Duration(milliseconds: 500));
},
const SizedBox(height: 20),
],
),
),
),
),
),
);
}
}
And this is the code of my FilterButtonWidget:
class FilterButtonWidget extends StatelessWidget {
const FilterButtonWidget({
Key key,
this.title,
this.item,
this.type,
}) : super(key: key);
final String title;
final dynamic item;
final String type;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 10),
child: Stack(
children: <Widget>[
Container(
height: 48,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: const LinearGradient(
colors: [Colors.white, Colors.white],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
boxShadow: const [
BoxShadow(
color: Colors.grey,
blurRadius: 0,
offset: Offset(0, 0),
),
],
),
),
Row(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
),
Expanded(
flex: 1,
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.fromLTRB(15, 0, 0, 0),
child: Text(
title,
style: const TextStyle(
fontFamily: 'Avenir',
fontSize: 16.0,
fontWeight: FontWeight.w500,
color: Colors.black,
),
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 4, 0),
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(const Color(0xffF2F2F2)),
padding:
MaterialStateProperty.all(const EdgeInsets.all(0.0)),
shape: MaterialStateProperty.all(
const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(7.0),
),
),
),
overlayColor: MaterialStateColor.resolveWith(
(states) => Colors.transparent),
foregroundColor: MaterialStateColor.resolveWith(
(states) => Color(0xff424242)),
),
//minWidth: 70,
child: Ink(
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [
Color(0xffFBD23E),
Color(0xffF6BE03),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
borderRadius: BorderRadius.circular(7.0)),
child: Container(
constraints:
const BoxConstraints(maxHeight: 40, maxWidth: 70),
alignment: Alignment.center,
child: const Icon(
Icons.arrow_forward_ios_rounded,
size: 22,
),
),
),
onPressed: () {
_bottomsheet(context);
},
),
),
],
),
],
),
);
}
void _bottomsheet(context) {
final FilterProvider filterProvider =
Provider.of<FilterProvider>(context, listen: false);
final _type = type;
showModalBottomSheet(
context: context,
isDismissible: true,
backgroundColor: Colors.transparent,
builder: (context) => Container(
height: MediaQuery.of(context).size.height * 0.60,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffFEFDFD), Color(0xffBDBDB2)],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(22.0),
topRight: Radius.circular(22.0),
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 15, 20, 12),
child: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: const TextStyle(
color: Color(0xffF6BE03),
fontFamily: 'Avenir',
fontWeight: FontWeight.w600,
fontSize: 24.0,
),
),
// IconButton(
// onPressed: () {
// Navigator.pop(context);
// },
// icon: const Icon(Icons.arrow_downward),
// iconSize: 30,
// ),
],
),
),
if (type == 'body' || type == 'drive' || type == 'brand')
CheckboxWidget(
item: item,
type: type,
state: filterProvider.filter,
)
else if (type == 'seats')
CupertinoMultiPicker(
state: filterProvider.filter['seats'],
)
else
CupertinoPickerWidget(
item: item,
type: type,
)
],
),
),
),
).whenComplete(() => filterProvider.apply = true);
}
}