Is there a way to use Expanded widget inside Wrap widget

Question

I am trying to make the buttons size dynamic inside the warp widget, her my code below

             Wrap(
              spacing: 10,
              alignment: WrapAlignment.spaceBetween,
              children: [
                for (InterestsClass item in interests)
                  InterestsButton(
                    text: item.interestsName,
                  )
              ],
            ),
InterestsButton is just an elevated button that is reusable, but if I add expanded as show below its Incorrect use of ParentDataWidget, since there is no flex parent

      Widget build(BuildContext context) {
    return Expanded(
      child: ElevatedButton(
        onPressed: () {
          setState(() {
            _flag = !_flag;
          });
        },
        child: Text(
          widget.text,
          style: TextStyle(color: _flag ? kWhite : k34, fontSize: 13),
        ),
        style: ElevatedButton.styleFrom(
            padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
            shape: StadiumBorder(),
            primary: _flag ? kBlue : Color(0xffFAFAFA)),
      ),
    );
  }

user_4399085 · Answer

I think u can use an alternative way Chip/ ChoiceChip. These widget is available in Flutter very useful for creating size dynamic button with change style when tap. See more here https://api.flutter.dev/flutter/material/Chip-class.html

https://medium.com/flutterdevs/chip-widgets-in-flutter-7a2d3d34597c

user_16191993 · Answer

Result One

I have it working now. Here is the code:

   FilterChip(
      label: Text("text"), 
      backgroundColor: Colors.transparent,
      shape: StadiumBorder(side: BorderSide()),
      onSelected: (bool value) {print("selected");},
     ),

Result Two

You can achieve it by this way

     Chip(
         shape: RoundedRectangleBorder(
         side: BorderSide(color: colorThird, width: 1),
         borderRadius: BorderRadius.circular(10),
      ),
        backgroundColor: colorSecondary,
        deleteIcon: Icon(
        Icons.close,
        color: Colors.white,
         size: 15,
     ),
       label: Text(searchController.recentSearchesList[index], style: 
       TextStyle(color: Colors.white),),
       deleteButtonTooltipMessage: 'erase',
       onDeleted: () {
       print(index);
   },
 );

Is there a way to use Expanded widget inside Wrap widget

2 Answers