why i can't pass Flutter TextField onChanged event value to a Text?

Question

i was following this example of using Stateful widgets but i can't make it run appropriately , take the value from onChanged event works with print function , but when i try to pass the value to Text , it won't take it , is because the the Text is outside of the event itself ? but it's still inside a statfulwidget

here is my code :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello You',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HelloYou(),
    );
  }
}

class HelloYou extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HelloYouState();
}

class _HelloYouState extends State<HelloYou> {
  @override
  Widget build(BuildContext context) {
    String name = "";

    return Scaffold(
      appBar: AppBar(
        title: Text("HelloYou App !"),
        backgroundColor: Colors.blueAccent,
      ),
      body: Container(
          padding: EdgeInsets.all(15.0),
          child: Column(
            children: <Widget>[
              TextField(
                onChanged: (string) {
                  setState(() {
                    name = string;
                    print('my text is :$name');
                  });
                },
              ),
              Text('my name $name')
            ],
          )),
    );
  }
}

Solution 1

Note: Just in case you faced problem while using StatelessWidget. In case of StatefulWidget you can declare the variable outside build method in State, but when you are using StatelessWidget you need to declare it globally like,

import 'package:flutter/material.dart';
String name = ""; //variable declared globally

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello You',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HelloYou(),
    );
  }
}

class HelloYou extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("HelloYou App !"),
        backgroundColor: Colors.blueAccent,
      ),
      body: Container(
          padding: EdgeInsets.all(15.0),
          child: Column(
            children: <Widget>[
              TextField(
                onChanged: (string) {
                  setState(() {
                    name = string;
                    print('my text is :$name');
                  });
                },
              ),
              Text('my name $name')
            ],
          )),
    );
  }
}

Most of the time we manage states with BLoC or provider packages which recreates StatelessWidgets instead of updating state of StatefulWidget which takes more memory.

Solution 2

Move string variable out of the build. When you put it inside the build, setState rerun build method and your string variable is gone.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello You',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HelloYou(),
    );
  }
}

class HelloYou extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HelloYouState();
}

class _HelloYouState extends State<HelloYou> {

  String name = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("HelloYou App !"),
        backgroundColor: Colors.blueAccent,
      ),
      body: Container(
          padding: EdgeInsets.all(15.0),
          child: Column(
            children: <Widget>[
              TextField(
                onChanged: (string) {
                  setState(() {
                    name = string;
                    print('my text is :$name');
                  });
                },
              ),
              Text('my name $name')
            ],
          )),
    );
  }
}

Comments

[Bhadresh]

You need to declare the name variable global instead of inside the build method.

[ibrahimkarahan]

I' m glad. If you can mark the answer, people can understand that the problem is resolved. Have a good day :)