How to listen to TextField changes realtime and update a Text widget with TextField content?

user_19290739 0
Viewed 122

I have a TextField and a Text widget that should show in RealTime the text written in the TextField.

This is the code:

 late final TextEditingController _importo;

  @override
  void initState() {
    _importo = TextEditingController();
    super.initState();}

    @override
    Widget build(BuildContext context) {
      return Column(children: [
        SizedBox(
          width: 50,
          child: TextField(
            textAlign: TextAlign.end,
            controller: _importo,
            decoration: const InputDecoration(
              hintText: '0.00',
            ),
            autocorrect: false,
            keyboardType: TextInputType.number,
          ),
        ),
        Text(
          _importo.text,
          style: const TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 15,
          ),
        ),
      ]);
    }
  }

I think there is something missing because the Text widget isn't updating.

flutter-layout dart flutter
2 Answers

There is scope(brackaet) issue on your code on initState and text will auto update on textField and adding listener update others UI widget on text changes.

 late final TextEditingController _importo;

 @override
  void initState() {
    super.initState();
    _importo = TextEditingController()
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      SizedBox(
        width: 50,
        child: TextField(
          textAlign: TextAlign.end,
          controller: _importo,
          decoration: const InputDecoration(
            hintText: '0.00',
          ),
          autocorrect: false,
          keyboardType: TextInputType.number,
        ),
      ),
      Text(
        _importo.text,
        style: const TextStyle(
          fontWeight: FontWeight.w400,
          fontSize: 15,
        ),
      ),
    ]);
  }
}
user_101571270

In text field in change event set state

TextField (
 onChanged:(val){
   setState((){});
  }
)

EDIT

import 'package:flutter/material.dart';



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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
     
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  TextEditingController _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Container(
           color: Colors.grey.withOpacity(0.2),
           child: Text("${_textController.text}")),
         SizedBox(height: 20),
         Container(
           color: Colors.grey,
           child: TextField(
             
             controller: _textController,
             onChanged: (val){
               setState((){});
             }
           ),
         )
       ]
      ),
    );
  }
}

preview

user_171690370
Related