CODEWITHSUNDEEP
androidflutter
Kalev
Kalev

Reputation: 95

Flutter assign text onchange value to variable

I'm following a flutter tutorial and came across a problem. It is supposed to take a value from textfield onChanged function and assign it to a variable. However it is not working. Since it is shown on iphone, I thought perhaps it works a little different on android.

@override
  Widget build(BuildContext context) {
    String newTaskTitle;
    return Container(
       color: Color(0xff757575),
       ....

TextField(
  autofocus: true,
  textAlign: TextAlign.center,
  onChanged: (newText) {
     newTaskTitle = newText;
  },
),
FlatButton(
   child: Text(
       'Add',
       style: TextStyle(
           color: Colors.white,
           ),
        ),
        color: Colors.lightBlueAccent,
        onPressed: () {
           print(newTaskTitle);
        },

Upvotes: 4

Views: 9025

Answers (3)

jenny
jenny

Reputation: 347


 static String newTaskTitle;
@override
  Widget build(BuildContext context) {
   
    return Container(
       color: Color(0xff757575),
       ....

hope this works

Upvotes: 0

Pro
Pro

Reputation: 3003

Kalev, try using StatefulWidget and refreshing state when you want the new text as shown below,

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  String text = 'Original text';
  String newTaskTitle;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(text),
            TextField(
              autofocus: true,
              textAlign: TextAlign.center,
              onChanged: (newText) {
                newTaskTitle = newText;
              },
            ),
            FlatButton(
                child: Text(
                  'Add',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                color: Colors.lightBlueAccent,
                onPressed: () {
                  setState(() {
                    text = newTaskTitle;
                  });
                }),
          ],
        ),
      ),
    ));
  }
}

demo

OR You could just add setState((){}) directly inside onChanged like this 

onChanged: (newText) {
    newTaskTitle = newText;
    setState((){});
  },

Upvotes: 4

Benjamin
Benjamin

Reputation: 6161

Ah, one of the most common issues in Flutter.

First off, are you using a StatefulWidget? Stateful Widgets are great for state management. They can hold a state and by using a function called setState(), you can change the state.

What does setState do?

The setState() function rebuilds the widget aka calling the build method again.

I would recommend storing your newTaskTitle variable outside the build method as it should not contain logic but also because every time build gets called, it will reset that variable's value.

Now, remember that setState function? You should use it in the onChanged callback like this!

TextField(
  autofocus: true,
  textAlign: TextAlign.center,
  onChanged: (newText) {
     setState(() {
       newTaskTitle = newText;
     });
  },
),

Now when a user types in the TextField, it will update the value. But hold on, we're not done yet. I do not recommend using the onChanged method to store the current value of the field. I would recommend that you use a TextEditingController and assign it to the controller property of TextField. You can access the text using the TextEditingController.text value. If you don't want to use that, at least use the callback onEditingComplete which will only run after the user has finished editing the field therefore not calling setState every time the field changes.

Upvotes: 0

Related Questions