How to dynamically setState variable in flutter?

Question

I just start to learn flutter, and I'm curious about how can i setState() dynamically in flutter

in React Native i usually used a function like this to setState dynamically:

class foo extends React.Component{
  state={
    username:null,
    password:null
  }

  toggleSetState(whatState, value){
    this.setState({ [whatState]: value })
  }

  render() {
    return (
      <View>
        <TextInput
          value={this.state.username}
          onChangeText={(text)=>{toggleSetState(username, text)}
        />
        <TextInput
          value={this.state.password}
          onChangeText={(text)=>{toggleSetState(password, text)}
        />
      </View>
    );
  }
}

what is an equivalent of above code in Flutter?

I've tried this in Flutter but it seems doesn't work

class _LoginFormState extends State<LoginForm> {
  String username, password;

  void ToogleState(typedata, text){
    setState(() {
      typedata = text;
    });
  }

  //Widget
  TextField(
    onChanged: (text){ToogleState(username, text); print(username);},
    decoration: InputDecoration(
      hintText: 'input username', labelText: 'Username'
    ),
  ),
}

setState is meant for state changes which changes the ui like fetching data then rendering it into widgets. In your case, TextField is already handing majority of the visual changes so you should not need to call setState. Flutter is not Reactjs. — user1462442
– user1462442, Commented Apr 10, 2019 at 5:10
@user1462442 it's just a simple case and i using TextField as an example, what do you think if someday you're facing the same issue with complex case and need to handle like this? e.g dynamic form from API, and Post back to the server — flix
– flix, Commented Apr 10, 2019 at 5:58
use initState and futures dartlang.org/tutorials/language/futures docs.flutter.io/flutter/widgets/State/initState.html Nothing is that complicated — user1462442
– user1462442, Commented Apr 10, 2019 at 14:24

flix · Accepted Answer · 2019-04-10 06:45:52Z

after some research and trying, i can achieve what i want with the code below:

class _LoginFormState extends State<LoginForm> {
  String username, password;
  //create an object
  var loginForm = {};
  final myController = TextEditingController();

  void ToogleState(typedata, text){
    setState(() {
      //i can assign any different variable with this code
      loginForm[typedata] = text;
      //output of LoginForm: {username: foo, password: bar}
    });
  }

  //widget
  Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      children: <Widget>[
        TextField(
          onEditingComplete: (){print(loginForm);},
          onChanged: (text){ToogleState("username", text); print(loginForm['username']);},
          decoration: InputDecoration(
            hintText: 'input username', labelText: 'Username'
          ),
        ),
        TextField(
          onEditingComplete: (){print(loginForm);},
          onChanged: (text){ToogleState("password", text); print(loginForm['password']);},
          decoration: InputDecoration(
            hintText: 'input password', labelText: 'Password'
          ),
        ),
      ],
    ),
  );
}

user1462442 · Accepted Answer · 2019-04-10 04:48:08Z

2

You just need to make a variable to hold the value. I am confused why you are calling setState when you are not modifying ephemeral state

Here are some helpful docs https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app

class _LoginFormState extends State<LoginForm> {
  String _username = "";
  String __password = "";
  void ToogleState( text){
    setState(() {
      _username = text;
    });
  }

  //Widget
  TextField(
    onChanged: (text){ToogleState( text); print(username);},
    decoration: InputDecoration(
      hintText: 'input username', labelText: 'Username'
    ),
  ),
}

edited Apr 10, 2019 at 4:48

answered Apr 10, 2019 at 4:44

user1462442

8,2801 gold badge28 silver badges28 bronze badges

7 Comments

user1462442 Over a year ago

If you need to an example of futures, here is a similar question. stackoverflow.com/questions/53820419/… Flutter is easier than Reactjs. You shouldnt have much trouble

flix Over a year ago

so what happened if i have 10 TextField like registering form? should i declared ToogleState 10 times for each variable (name, date, gender, etc)?

user1462442 Over a year ago

You do not need to write toogleState everytime. You can use a lambda function instead. In fact, you probably do not need to call setState at all in this case since TextField is already handing text changes

flix Over a year ago

can you give me an example of lambda function?

user1462442 Over a year ago

stackoverflow.com/questions/52404206/…

|

Collectives™ on Stack Overflow

How to dynamically setState variable in flutter?

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related