cloudsolutions-atoms/lib/views/widgets/status/multi_status_menu.dart

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<Lookup> statuses;
  final List<Lookup> initialSelectedStatus;
  final Function(List<Lookup>) onSelect;

  const MultiStatusMenu({Key key, this.statuses, this.onSelect, this.initialSelectedStatus}) : super(key: key);
  @override
  _MultiStatusMenuState createState() => _MultiStatusMenuState();
}

class _MultiStatusMenuState extends State<MultiStatusMenu> {

  List<Lookup> _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.label,
                          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<Lookup>(
              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.label.toLowerCase().contains(_controller.text);
                });
              },
              itemBuilder: (context, part) {
                return ListTile(
                  title: Text(part.label),
                );
              },
              onSuggestionSelected: (status) {
                _controller.clear();
                if(!_selectedStatus.contains(status)){
                  _selectedStatus.add(status);
                  widget.onSelect(_selectedStatus);
                  setState(() {});
                }
              },
            ),
          ),
        ],
      );
  }
}