Multi Select ChipGroup Pre Selected Items In Flutter

Multi Select ChipGroup Pre Selected Items In Flutter :

This flutter tutorial post is multi select ChipGroup pre selected Items display in page.

This multi select ChipGroup pre selected program Android, Kotlin, Flutter, PHP, C++ all the languages name. You can selected:
1) No select
2) One select
3) More than one selected

and pre seleted languages are Flutter and Kotlin.
items: [‘Android’, ‘Kotlin’, ‘Flutter’, ‘PHP’, ‘C++’],
preSelectedItems: [‘Flutter’, ‘Kotlin’,]

Provide the functionality multi select ChipGroup:
1) Pre selecte items
2) Spacing
3) common or individual left side icon display
4) Select and diselect change the color.

Screenshot :

Multi Select ChipGroup Pre Selected Items In Flutter

Screenshot :

Multi Select ChipGroup Pre Selected Items In Flutter

multiselectchipgroup.dart

import 'package:flutter/material.dart';

class MultiSelectChipGroup extends StatefulWidget {
  final List<String> items;
  final Function(List<String>) onSelectionChanged;
  final List<IconData> leftIcons;

  final Color selectedColor;
  final Color disabledColor;
  final Color labelSelectedColor;
  final Color labelDisabledColor;
  final Color iconDisabledColor;
  final Color iconSelectedColor;
  final IconData leftCommonIcon;
  final double leftIconSize;
  final EdgeInsetsGeometry padding;
  final double labelFontSize;
  final double horizontalChipSpacing;
  final double verticalChipSpacing;
  final List<String> preSelectedItems;

  MultiSelectChipGroup(
      {@required this.items,
        @required this.selectedColor,
        @required this.disabledColor,
        this.onSelectionChanged,
        this.labelSelectedColor,
        this.labelDisabledColor,
        this.leftCommonIcon,
        this.padding,
        this.labelFontSize,
        this.leftIconSize,
        this.iconDisabledColor,
        this.iconSelectedColor,
        this.leftIcons,
        this.horizontalChipSpacing,
        this.verticalChipSpacing,
        this.preSelectedItems});

  @override
  _MultiSelectChipGroupState createState() =>
      _MultiSelectChipGroupState(preSelectedItems, onSelectionChanged);
}

class _MultiSelectChipGroupState extends State<MultiSelectChipGroup> {
  List<String> selectedChoices = List<String>();

  _MultiSelectChipGroupState(List<String> preSelectedItems,
      Function(List<String>) onSelectionChanged) {
    if (preSelectedItems != null) {
      selectedChoices = preSelectedItems;
      if (onSelectionChanged != null) onSelectionChanged(selectedChoices);
    }
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> choiceChips = List<Widget>();
    widget.items.asMap().forEach((index, item) {
      choiceChips.add(choiceChip(item,
          leftIcon: widget.leftIcons != null ? widget.leftIcons[index] : null));
    });

    return Wrap(
      spacing: widget.horizontalChipSpacing == null
          ? 0
          : widget.horizontalChipSpacing,
      runSpacing:
      widget.verticalChipSpacing == null ? 0 : widget.verticalChipSpacing,
      children: choiceChips,
    );
  }

  Widget choiceChip(String item, {IconData leftIcon}) {
    return ChoiceChip(
      labelStyle: TextStyle(
          fontSize: widget.labelFontSize == null ? 14 : widget.labelFontSize,
          color: selectedChoices.contains(item)
              ? widget.labelSelectedColor == null
              ? widget.disabledColor
              : widget.labelSelectedColor
              : widget.labelDisabledColor == null
              ? widget.selectedColor
              : widget.labelDisabledColor),
      selectedColor: widget.selectedColor,
      disabledColor: widget.disabledColor,
      backgroundColor: widget.disabledColor,
      labelPadding: widget.padding,
      padding: widget.padding,
      avatar: widget.leftCommonIcon == null && leftIcon == null
          ? null
          : Icon(
        leftIcon == null ? widget.leftCommonIcon : leftIcon,
        color: selectedChoices.contains(item)
            ? widget.iconSelectedColor == null
            ? widget.disabledColor
            : widget.iconSelectedColor
            : widget.iconDisabledColor == null
            ? widget.selectedColor
            : widget.iconDisabledColor,
        size: widget.leftIconSize == null ? 16 : widget.leftIconSize,
      ),
      label: Text(item, style: TextStyle(color: Colors.black)),
      selected: selectedChoices.contains(item) ? true : false,
      onSelected: (selected) {
        setState(() {
          selectedChoices.contains(item)
              ? selectedChoices.remove(item)
              : selectedChoices.add(item);
          if (widget.onSelectionChanged != null)
            widget.onSelectionChanged(selectedChoices); // +added
        });
      },
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'multiselectchipgroup.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Multi select chipGroup pre selected items'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            MultiSelectChipGroup(
              items: ['Android', 'Kotlin', 'Flutter', 'PHP', 'C++'],
              preSelectedItems: [
                'Flutter',
                'Kotlin',
              ],
              onSelectionChanged: (values) {
                print(values);
              },
              horizontalChipSpacing: 10,
              selectedColor: Colors.grey.withOpacity(0.7),
              disabledColor: Colors.white,
              leftCommonIcon: Icons.perm_identity, //Default Icon all
              leftIcons: [
                Icons.alarm,
                Icons.ac_unit,
                Icons.accessibility,
                Icons.account_balance,
                Icons.perm_identity,
              ],
            ),
          ],
        ),
      ),
    );
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in