Search code examples
stringflutterandroid-studiodarttext

Can't Update a String Variable After initializing it in Flutter


I want to Update the new value of the 'holecode' variable in 'inputform.dart' then get this new value to the 'otpscreen.dart' The Problem that in each time I try to get the value of the 'holecode' string variable I get the 'default' value which I initialize it.I tried to make the 'holecode' variable as late String holecode; but it return Null in the second Screen in each time I try to get it's value.

inputform.dart:

import 'package:flutter/material.dart';
class Inputform extends StatefulWidget {
  List<String> code = ["","","","","",""];
  String holeCode = "default";
  @override
  State<Inputform> createState() => InputformState();
}

class InputformState extends State<Inputform> {
  @override
  Widget build(BuildContext context) {
    return TextFormField(
              onChanged: (value) {
                setState(() {
                  widget.code[0] = value;
                  widget.holeCode = widget.code[0] + 222205;
                });
                if (value.length == 1) {
                  FocusScope.of(context).nextFocus();
                 }
                }
               ),
              },

otp.dart:

import 'package:flutter/material.dart';

class OtpVerification extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => Otp();
}
class Otp extends State<OtpVerification> {
  final Inputform ani= new Inputform ();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        child: 
            FlatButton(
              onPressed: () {
                // trying to print the new value in this screen but it 
                //return the default value 'default'
                print(ani.holeCode);
      ),
    );
  }

Solution

  • Try this:

    Have your InputForm like so:

    class Inputform extends StatefulWidget {
      final ValueChanged<String> onHoleCodeChanged;
    
      const Inputform({
        Key? key,
        required this.onHoleCodeChanged,
      }) : super(key: key);
      @override
      State<Inputform> createState() => InputformState();
    }
    
    class InputformState extends State<Inputform> {
      List<String> code = ["", "", "", "", "", ""];
      String holeCode = "default";
      @override
      Widget build(BuildContext context) {
        return TextFormField(onChanged: (value) {
          setState(() {
            code[0] = value;
            holeCode = code[0] + "222205";
            widget.onHoleCodeChanged(holeCode);
          });
          if (value.length == 1) {
            FocusScope.of(context).nextFocus();
          }
        });
      }
    }
    

    And have your OTP class like so:

    class OtpVerification extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => Otp();
    }
    
    class Otp extends State<OtpVerification> {
      late Inputform ani;
    
      @override
      void initState() {
        ani = Inputform(
          onHoleCodeChanged: (v) {
            setState(() {
              aniHoleCode = v;
            });
          },
        );
        super.initState();
      }
    
      String aniHoleCode = "";
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: FlatButton(
            child: Text("Button"),
            onPressed: () {print(aniHoleCode);},
          ),
        );
      }
    }