为什么单选按钮不改变颜色 onPressed - Flutter？

Question

I have 2 custom radio buttons inside my bottom modal sheet. when i click onPressed method, they don't change color instantly. After I close and open again the modal menu, color is set properly.

Widget customRadio(String text, int index){
    return OutlinedButton(
      onPressed: () {
        setState((){
          selected = index;
        });
      },
      child: Text(
        text, style: TextStyle(color: (selected == index) ?Colors.white: Colors.grey),
      ),
      style: OutlinedButton.styleFrom(
        primary: Colors.white,
        backgroundColor: (selected == index)?Colors.deepOrange: Colors.white,
      ),
    );
  }

Answer 1

Create new statefulWidget for widget BottomSheet , add int selected = 0; move to DialogStatefull

Try this demo;

import 'package:flutter/material.dart';

class SaveScreen extends StatefulWidget {
  const SaveScreen({Key? key}) : super(key: key);

  @override
  State<SaveScreen> createState() => _SaveScreenState();
}

class _SaveScreenState extends State<SaveScreen> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return DialogStatefull();
            },
          );
        },
      ),
    );
  }
}

class DialogStatefull extends StatefulWidget {
  const DialogStatefull({Key? key}) : super(key: key);

  @override
  State<DialogStatefull> createState() => _DialogStatefullState();
}

class _DialogStatefullState extends State<DialogStatefull> {
  int selected = 0;

  @override
  Widget build(BuildContext context) {
    return StatefulBuilder(builder: (context, state) {
      return Container(
        height: 200,
        color: Colors.amber,
        child: Center(
          child: Column(
            children: [
              customRadio("helo", 0),
              customRadio("helo", 1),
              customRadio("helo", 2),
            ],
          ),
        ),
      );
    });
  }

  Widget customRadio(String text, int index) {
    return OutlinedButton(
      onPressed: () {
        setState(() {
          selected = index;
          print(index);
          print(selected);
        });
      },
      child: Text(
        text,
        style:
            TextStyle(color: (selected == index) ? Colors.white : Colors.grey),
      ),
      style: OutlinedButton.styleFrom(
        primary: Colors.white,
        backgroundColor: (selected == index) ? Colors.deepOrange : Colors.white,
      ),
    );
  }
}

Answer 2

If you want bottomsheet on same screen then you need to use StatefulBuilder with StateSetter argumen

int selected = 0;
      Widget customRadio(
          {required String text, required int index, Function()? onTap,
       }) {
        return OutlinedButton(
          onPressed: onTap,
          style: OutlinedButton.styleFrom(
            primary: Colors.white,
            backgroundColor: (selected == index) ? Colors.deepOrange : Colors.white,
          ),
          child: Text(
            text,
            style:
                TextStyle(color: (selected == index) ? Colors.white : Colors.grey),
          ),
        );
      }

pass the function as argument in your widget that you need to change the ui

  _showBottomSheet() {
    return showModalBottomSheet(
      context: context,
      builder: (context) {
        return StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
          return Column(
            children: [
              customRadio(
                text: 'button1',
                index: 1,
                onTap: () {
                  setState(() {
                    selected = 1;
                  });
                },
              ),
              customRadio(
                text: 'button2',
                index: 2,
                onTap: () {
                  setState(() {
                    selected = 2;
                  });
                },
              ),
            ],
          );
        });
      },
    );
  }

here is the bottomsheet with list of widgets