Flutter display text typed on TextField() onpressing the button-CodePudding

I want to display the Input given in the textfield to the place instead of text shown as "result" in the 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;
            });
          }),
    );
  }
}

CodePudding user response：

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"),
),

CodePudding user response：

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;
            });
          }),
    );
  }
}