Flutter Radio Value not Changing in Stepper

Question

The problem is that _qualificationRadioGroupValue value update when setState() called but after build method called its reset to its original value I am beginner to flutter so don't know what I am doing wrong I have tested only 2 radio button it's working outside of stepper but not working in stepper I don't know why

This is the code for my screen

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  final title;

  HomePage({this.title});

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Step> _steps = <Step>[];
  int _currentStep = 0;
  int _isStepsCompleted = false;

  @override
  void initState() {
    super.initState();
    _steps.add(_lastQualificationStep());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          Stepper(
            steps: _steps,
            currentStep: _currentStep,
            onStepTapped: (step) => onStepTapped(step),
            onStepContinue: onStepContinue,
            onStepCancel: onStepCancel,
          ),
        ],
      ),
    );
  }

  void onStepContinue() {
    _currentStep + 1 != _steps.length
        ? onStepTapped(_currentStep + 1)
        : setState(() => _isStepsCompleted = true);
  }

  void onStepTapped(int step) => setState(() => _currentStep = step);

  void onStepCancel() {
    if (_currentStep > 0) {
      onStepTapped(_currentStep - 1);
    }
  }

  void setSelectRadioButton(int value, int groupValue) {
    print('Radio Value: $value');
    print('GroupValue before setState: $groupValue');
    setState(() {
      groupValue= value;
    });
    print('GroupValue after setState: $groupValue');
  }

  int _qualificationRadioGroupValue = 0;

  Step _lastQualificationStep() {
    List<RadioModel> qualifitcationList = [
      RadioModel(
          title: 'Pre-Engineering',
          value: 0,
          groupValue: _qualificationRadioGroupValue),
      RadioModel(
          title: 'Pre-Medical',
          value: 1,
          groupValue: _qualificationRadioGroupValue),
      RadioModel(
          title: 'ICS', value: 2, groupValue: _qualificationRadioGroupValue),
      RadioModel(
          title: 'Commerce',
          value: 3,
          groupValue: _qualificationRadioGroupValue),
    ];
    return Step(
      title: Text("What is your last qualification?"),
      isActive: _currentStep == 0,
      state: _currentStep == 0 ? StepState.editing : StepState.indexed,
      content: Column(
        children: _qualifitcationList
            .map(
              (qualification) => RadioListTile(
                title: Text(qualification.title),
                value: qualification.value,
                groupValue: qualification.groupValue,
                onChanged: (value) =>
                    setSelectRadioButton(value, qualification.groupValue),
              ),
            )
            .toList(),
      ),
    );
  }
}

class RadioModel {
  final title;
  final value;
  final groupValue;

  RadioModel({this.title, this.value, this.groupValue});
}

score 2 · Accepted Answer · answered Feb 03 '20 at 03:18

You can copy paste run full code below
Step 1: List<Step> _steps = <Step>[]; was built only once and then the same instance is reused every time. You can reference detail in https://github.com/flutter/flutter/issues/22033#issuecomment-424228926
You need to use

 List<Step> get _steps => <Step>[_lastQualificationStep()];

Step 2: change groupValue to _qualificationRadioGroupValue

        children: qualifitcationList
            .map(
              (qualification) => RadioListTile(
            title: Text(qualification.title),
            value: qualification.value,
            groupValue: _qualificationRadioGroupValue,
            onChanged: (value) =>

...
setState(() {
  _qualificationRadioGroupValue = value;
});

working demo

full code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  final title;

  HomePage({this.title});

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Step> get _steps => <Step>[_lastQualificationStep()];
  int _currentStep = 0;
  bool _isStepsCompleted = false;

  @override
  void initState() {
    super.initState();
    //_steps.add(_lastQualificationStep());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          Stepper(
            steps: _steps,
            currentStep: _currentStep,
            onStepTapped: (step) => onStepTapped(step),
            onStepContinue: onStepContinue,
            onStepCancel: onStepCancel,
          ),
        ],
      ),
    );
  }

  void onStepContinue() {
    _currentStep + 1 != _steps.length
        ? onStepTapped(_currentStep + 1)
        : setState(() => _isStepsCompleted = true);
  }

  void onStepTapped(int step) => setState(() => _currentStep = step);

  void onStepCancel() {
    if (_currentStep > 0) {
      onStepTapped(_currentStep - 1);
    }
  }

  void setSelectRadioButton(int value, int groupValue) {
    print('Radio Value: $value');
    print('GroupValue before setState: $groupValue');
    setState(() {
      _qualificationRadioGroupValue = value;
    });
    print('GroupValue after setState: $groupValue');
  }

  int _qualificationRadioGroupValue = 0;

  Step _lastQualificationStep() {
    List<RadioModel> qualifitcationList = [
      RadioModel(
          title: 'Pre-Engineering',
          value: 0,
          groupValue: _qualificationRadioGroupValue),
      RadioModel(
          title: 'Pre-Medical',
          value: 1,
          groupValue: _qualificationRadioGroupValue),
      RadioModel(
          title: 'ICS', value: 2, groupValue: _qualificationRadioGroupValue),
      RadioModel(
          title: 'Commerce',
          value: 3,
          groupValue: _qualificationRadioGroupValue),
    ];
    return Step(
      title: Text("What is your last qualification?"),
      isActive: _currentStep == 0,
      state: _currentStep == 0 ? StepState.editing : StepState.indexed,
      content: Column(
        children: qualifitcationList
            .map(
              (qualification) => RadioListTile(
            title: Text(qualification.title),
            value: qualification.value,
            groupValue: _qualificationRadioGroupValue,
            onChanged: (value) =>
                setSelectRadioButton(value, qualification.groupValue),
          ),
        )
            .toList(),
      ),
    );
  }
}

class RadioModel {
  final title;
  final value;
  final groupValue;

  RadioModel({this.title, this.value, this.groupValue});
}

ok i have accepted your answer correct but i need some clarification about ```setState(() { _qualificationRadioGroupValue = value; }``` that i want ```_qualificationRadioGroupValue``` this to be function paramter so i can use this same method for other steps — Burhan Khanzada, Feb 03 '20 at 04:13
You can use List to keep records all your Steps (such as firstQualification, secondQualification, LastQualification) result, because in Dart int is pass via value not reference. — chunhunghan, Feb 04 '20 at 00:49

Flutter Radio Value not Changing in Stepper

1 Answers1