0

Hi I am using choice chips widget to select from a list of options, how do i pass the selected value as input a form ,am calling the CustomChipWidget() to render chips in the UI page .

i am able to print the value of the selected chip but i need to pass it as input in a form ,

` I am generating choice chips list like this and am using it in another screen

import 'package:flutter/material.dart';
import 'package:qip_life/Chip/ChipItems.dart';
import 'package:qip_life/Constants.dart';

class CustomChipWidget extends StatefulWidget {
  @override
  _CustomChipWidgetState createState() {
    return _CustomChipWidgetState();
  }
}

class _CustomChipWidgetState extends State<CustomChipWidget> {
  var selectedIndex;

  String get SelectedLabel => chipsList[selectedIndex].label;
  IconData get SelectedIcon => chipsList[selectedIndex].avatar;

  selectedChip() {
    print(SelectedLabel);
    print(SelectedIcon);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: kChipContainerBackGroundcolour,
      child: Wrap(
        direction: Axis.vertical,
        crossAxisAlignment: WrapCrossAlignment.center,
        spacing: 1.0,
        runSpacing: 1.0,
        children: customChips(),
      ),
    );
  }

  List<Widget> customChips() {
    List<Widget> chips = [];
    for (int i = 0; i < chipsList.length; i++) {
      Widget item = Padding(
        padding: const EdgeInsets.only(left: 1, right: 1),
        child: ChoiceChip(
          label: Text(
            chipsList[i].label,
            style: kChipLableTextStyle,
          ),
          avatar: Icon(
            chipsList[i].avatar,
            size: 24.0,
            color: Color(0xff506D84),
          ),
          elevation: 2,
          backgroundColor: Color(0xfff3fcff),
          selectedColor: chipsList[i].selectedColor,
          tooltip: 'Select your chip ',
          selected: selectedIndex == i,
          onSelected: (bool value) {
            setState(() {
            
              selectedIndex = i;
              chipsList[i].label = SelectedLabel;
              chipsList[i].avatar = SelectedIcon;

              selectedChip();
            });
          },
        ),
      );
      chips.add(item);
    }
    return chips;
  }
}

`

0 Answers0