I was trying to make a selected box widget. If the box is clicked it will be highlighted as a red border. I am also using a stateful widget but the ui is not updating the color once the box is clicked. I tried many solutions but they do not seems to work. Please help. Here is my code.

** AddressTypeWidget.dart**

class AddressTypeWidget extends StatefulWidget {
      AddressTypeWidget({
        Key? key,
        required this.upadte,
      }) : super(key: key);
    
      int selectedIndex = 0;
      String selectedAddress = 'Home';
    
      @override
      State<AddressTypeWidget> createState() => _AddressTypeWidgetState();
    }
    
class _AddressTypeWidgetState extends State<AddressTypeWidget> {
      @override
          
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: EdgeInsets.symmetric(vertical: 10),
          height: screenSize.height * .05,
          width: screenSize.width,
          child: ListView.builder(
              scrollDirection: Axis.horizontal,
              primary: false,
              shrinkWrap: true,
              itemCount: addressType.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    widget.selectedIndex = index;
                    print(widget.selectedIndex);
    
                    widget.selectedAddress = addressType[widget.selectedIndex];
                    print(widget.selectedAddress);
                  },
                  child: FittedBox(
                    child: Container(
                      margin: EdgeInsets.symmetric(
                        horizontal: 5,
                        vertical: 5,
                      ),
                      padding: EdgeInsets.symmetric(
                        horizontal: 10,
                        vertical: 5,
                      ),
                      decoration: BoxDecoration(
                        color: widget.selectedIndex == index
                            ? Colors.red.withOpacity(0.1)
                            : Colors.transparent,
                        border: Border.all(
                          color: widget.selectedIndex == index
                              ? Colors.red
                              : Colors.grey.shade400,
                        ),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Center(
                        child: Text(
                          addressType[index],
                          style: secondaryTitleStyle.copyWith(
                            fontSize: 15,
                          ),
                        ),
                      ),
                    ),
                  ),
                );
              }),
        );
      }
    }

CodePudding user response：

The UI is not updating because you are not using the setState function with the stateful widget. Try the updated code below.

class AddressTypeWidget extends StatefulWidget {
      AddressTypeWidget({
        Key? key,
        required this.upadte,
      }) : super(key: key);
    
      int selectedIndex = 0;
      String selectedAddress = 'Home';
    
      @override
      State<AddressTypeWidget> createState() => _AddressTypeWidgetState();
    }
    
class _AddressTypeWidgetState extends State<AddressTypeWidget> {
      @override
          
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: EdgeInsets.symmetric(vertical: 10),
          height: screenSize.height * .05,
          width: screenSize.width,
          child: ListView.builder(
              scrollDirection: Axis.horizontal,
              primary: false,
              shrinkWrap: true,
              itemCount: addressType.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                  widget.selectedIndex = index;
                  // print(widget.selectedIndex);

                  widget.selectedAddress = addressType[widget.selectedIndex];
                  // print(widget.selectedAddress);
                });                  },
                  child: FittedBox(
                    child: Container(
                      margin: EdgeInsets.symmetric(
                        horizontal: 5,
                        vertical: 5,
                      ),
                      padding: EdgeInsets.symmetric(
                        horizontal: 10,
                        vertical: 5,
                      ),
                      decoration: BoxDecoration(
                        color: widget.selectedIndex == index
                            ? Colors.red.withOpacity(0.1)
                            : Colors.transparent,
                        border: Border.all(
                          color: widget.selectedIndex == index
                              ? Colors.red
                              : Colors.grey.shade400,
                        ),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Center(
                        child: Text(
                          addressType[index],
                          style: secondaryTitleStyle.copyWith(
                            fontSize: 15,
                          ),
                        ),
                      ),
                    ),
                  ),
                );
              }),
        );
      }
    }