Display text typed in TextField() when button pressed

user_15086130 0
Viewed 111

I want to display the Input given in the TextField to the place instead of the text shown as "result" in the below picture when the FloatingActionButton is pressed. enter image description here

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: const ScreenHomes(),
    );
  }
}

class ScreenHomes extends StatefulWidget {
  const ScreenHomes({Key? key}) : super(key: key);

  @override
  State<ScreenHomes> createState() => _ScreenHomesState();
}

class _ScreenHomesState extends State<ScreenHomes> {
  @override
  Widget build(BuildContext context) {
    final _textinfield = TextEditingController();
    var newtext = "";
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.lightBlue),
      body: SafeArea(
          child: Center(
              child: Column(children: [
        Container(
            child: Text(
          newtext,
          style: TextStyle(fontSize: 50),
        )),
        TextField(
          controller: _textinfield,
          decoration: InputDecoration(
              border: OutlineInputBorder(), hintText: "Type to Print"),
        )
      ]))),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.print),
          onPressed: () {
            setState(() {
              newtext = _textinfield.text;
            });
          }),
    );
  }
}
flutter-layout flutter
2 Answers

You can make use of onChanged for this purpose like this:

TextField(
  onChanged: (txt)=> setState(()=> newtext = txt),
  decoration: InputDecoration(
     border: OutlineInputBorder(), hintText: "Type to Print"),
),
user_169851460

You have done everything properly just a mistake to declare the variable inside the build function

Do not declare var newtext inside the build function.

You have to declare both of the variables before the build function. The thing that is happening with your code is that when you are calling the setState function the build function is re-run. Inside the build function, flutter is setting the newtext to "" empty string again. That's the reason you don't have the updated value of the newtext.

Just move the newtext and _textinfield variable before the build function.

class _ScreenHomesState extends State<ScreenHomes> {
   String newtext = "";
   final _textinfield = TextEditingController();
  @override
  Widget build(BuildContext context) {
    // do not initialize variables here 
    // cause every time you rebuild this (call setState) the  variable will be reinitialized
    
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.lightBlue),
      body: SafeArea(
          child: Center(
              child: Column(children: [
        Container(
            child: Text(
          newtext,
          style: TextStyle(fontSize: 50),
        )),
        TextField(
          controller: _textinfield,
          decoration: InputDecoration(
              border: OutlineInputBorder(), hintText: "Type to Print"),
        )
      ]))),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.print),
          onPressed: () {
            setState(() {
              newtext = _textinfield.text;
            });
          }),
    );
  }
}
user_112652900
Related