Abdullah Bahattab
Abdullah Bahattab

Reputation: 716

How the onChange TextField pass the data over into button onPressed property

I'm trying to pass data from TextField with onChange property to onPressed button.

If I type my string as below:

String newTextTitle;

then I get error on print(newTextTitle);:

The non-nullable local variable 'newTextTitle' must be assigned before it can be used. Try giving it an initializer expression, or ensure that it's assigned on every execution path.

So I change it to

String? newTextTitle;

then the error won't appear again. But The data won't pass from TextField to my button, actually passing null.

And if I assigned some string then it is printing always what I assigned regardless of any change in the TextField.

My TextField code:

TextField(
 autofocus: true,
 textAlign: TextAlign.center,
 onChanged: (newValue) {
  newTextTitle = newValue;
 },
),

My button code:

TextButton(
 onPressed: () {
  print('Passing Test $newTextTitle');
 },
),

my output consol:

I/flutter (23788): Passing Test null

This code is worked so fine in older flutter. But now I used Flutter 2.5.2 and there is somthing has been changed.

Upvotes: 1

Views: 2754

Answers (2)

david okoroafor
david okoroafor

Reputation: 363

Using a TextEditingController is the Flutter recommended way of doing what your trying to do. See (https://flutter.dev/docs/cookbook/forms/text-field-changes)

// Setup your controller
final TextEditingController _controller = TextEditingController();

// Add controller to your TextField
TextField(
   controller: _controller,
),

// Get the text via controller.
TextButton(
  onPressed: () {
     print(_controller.text);
  },
  child: const Text('click')
)

Upvotes: 1

Raza Shabbir
Raza Shabbir

Reputation: 161

That's weird works completely fine for me. Maybe match the code if you wish I can leave a sample here. Make sure you are not assigning

For the onChange function make sure you are using ``TextFormField``` instead. Although it shouldn't matter in the first place something you can try as well.

It seems like that you might be assigning string within build context and within the scope of the current text field, that's mostly the reason. A sample would be a lot helpful in that case so I can re-edit my answer for your use case.

newTextTitle in the scope of the build function.




import 'package:flutter/material.dart';

void main() {
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const MyHomePage(),
   );
 }
}

String? newTextTitle;

class MyHomePage extends StatelessWidget {
 const MyHomePage({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       body: SafeArea(
     child: Column(children: [
       TextFormField(
         onChanged: (newValue) {
           newTextTitle = newValue;
         },
       ),
       TextButton(
           onPressed: () {
             print(newTextTitle);
           },
           child: const Text('Buttom'))
     ]),
   ));
 }
}

Compare the code and I am on Flutter 2.5.3 enter image description here

String? newTextTitle; //past it here
Buildwidget(){
String? newTextTitle; //remove from here

}

Upvotes: 0

Related Questions