import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_typeahead/flutter_typeahead.dart'; import 'package:test_sa/models/lookup.dart'; import 'package:test_sa/views/app_style/colors.dart'; import 'package:test_sa/views/app_style/sizing.dart'; class MultiStatusMenu extends StatefulWidget { final List statuses; final List initialSelectedStatus; final Function(List) onSelect; const MultiStatusMenu({Key key, this.statuses, this.onSelect, this.initialSelectedStatus}) : super(key: key); @override _MultiStatusMenuState createState() => _MultiStatusMenuState(); } class _MultiStatusMenuState extends State { List _selectedStatus = []; TextEditingController _controller; @override void initState() { _controller = TextEditingController(); _selectedStatus.addAll(widget.initialSelectedStatus); super.initState(); } @override void dispose() { _controller.clear(); super.dispose(); } @override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Wrap( crossAxisAlignment: WrapCrossAlignment.start, alignment: WrapAlignment.start, runAlignment: WrapAlignment.start, children: List.generate( _selectedStatus.length, (index) { final status = _selectedStatus[index]; return Container( height: 36 * AppStyle.getScaleFactor(context), margin: EdgeInsets.all(4 * AppStyle.getScaleFactor(context)), //padding: EdgeInsets.all(4 * AppStyle.getScaleFactor(context)), decoration: BoxDecoration( color: Theme.of(context).colorScheme.primary, borderRadius: BorderRadius.circular(8) ), child: Row( mainAxisSize: MainAxisSize.min, children: [ const SizedBox(width: 12,), Text( status.name, style: Theme.of(context).textTheme.bodyText1.copyWith( color:Theme.of(context).colorScheme.onPrimary, ), ), IconButton( color:Theme.of(context).colorScheme.onPrimary, onPressed: (){ _selectedStatus.remove(status); widget.onSelect(_selectedStatus); setState(() {}); }, icon: const Icon(Icons.delete) ) ], ) ); } ), ), Container( padding: const EdgeInsets.symmetric( horizontal: 16 ), decoration: BoxDecoration( color: Colors.white, border: Border.all(color:AColors.black), borderRadius: BorderRadius.circular( AppStyle.borderRadius * AppStyle.getScaleFactor(context) ), boxShadow: const [ AppStyle.boxShadow ] ), child: TypeAheadField( textFieldConfiguration: TextFieldConfiguration( style: Theme.of(context).textTheme.subtitle1, controller: _controller, textAlign: TextAlign.center, decoration: const InputDecoration( border: InputBorder.none, disabledBorder: InputBorder.none, focusedBorder: InputBorder.none, enabledBorder: InputBorder.none, ), textInputAction: TextInputAction.search, ), suggestionsCallback: (vale) { return widget.statuses.where((Lookup option) { return option.name.toLowerCase().contains(_controller.text); }); }, itemBuilder: (context, part) { return ListTile( title: Text(part.name), ); }, onSuggestionSelected: (status) { _controller.clear(); if(!_selectedStatus.contains(status)){ _selectedStatus.add(status); widget.onSelect(_selectedStatus); setState(() {}); } }, ), ), ], ); } }