why radio button don't change color 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,
      ),
    );
  }
}