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, Apr 10 '19 at 05: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, Apr 10 '19 at 05:58
use `initState` and futures https://www.dartlang.org/tutorials/language/futures https://docs.flutter.io/flutter/widgets/State/initState.html Nothing is that complicated — user1462442, Apr 10 '19 at 14:24

flix · Accepted Answer · 2019-04-10T06:45:52.037

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 · Answer 2 · 2019-04-10T04:48:08.637

1

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 '19 at 04:48

answered Apr 10 '19 at 04:44

user1462442

7,672
1
24
27

If you need to an example of futures, here is a similar question. https://stackoverflow.com/questions/53820419/flutter-dart-calling-a-function-that-is-a-futurestring-but-needs-to-retu/53820672#53820672 Flutter is easier than Reactjs. You shouldnt have much trouble – user1462442 Apr 10 '19 at 04:45
so what happened if i have 10 `TextField` like registering form? should i declared `ToogleState` 10 times for each variable (name, date, gender, etc)? – flix Apr 10 '19 at 04:47
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 – user1462442 Apr 10 '19 at 04:49
can you give me an example of _lambda function_? – flix Apr 10 '19 at 04:50
https://stackoverflow.com/questions/52404206/what-does-the-empty-parentheses-after-the-onpressed-property-mean-in-dart/52407595#52407595 – user1462442 Apr 10 '19 at 04:54
thought it's hard to understand, but i still need to handle dynamic variable so i don't need to write the same setState with only different variable everytime – flix Apr 10 '19 at 04:57
`setState` tells the framework to rebuild the widget tree https://docs.flutter.io/flutter/widgets/State/setState.html You can change the internal state without telling the widget to rebuild itself. – user1462442 Apr 10 '19 at 05:00

How to dynamically setState variable in flutter?

2 Answers2