Flutter : hintText of TextField not getting updated in Screen UI

Question

Using builTextField() method to create textField, passing different controller.
TextEditingController phoneController;
TextEditingController otpController;
builTextField(phoneController),
builTextField(otpController),

hintText is populated using phoneController.text and otpController.text for respective textFields.

Similarly,

using buildRaisedButton() method to create Button, passing differetnt callback.
buildRaisedButton('Register', registrationCallback),
buildRaisedButton('Verify', verifyOTPCallback),
buildRaisedButton('Reset',resetCallback),

on button click 'Reset', want to clear the hitText of both the textfields

resetCallback(){
    print('cleared ....');
    setState(() {
      phoneController.clear();
      otpController.clear();
    });
  }

It looks like controller.clear is resetting the conroller.text value to empty(''), but as the value for hintText is chosen to be conroller.text, should also get updated in screen to 'empty'. but unfortunately somehow its not reflecting in UI, eventhough wrapped the code inside setState()

buildTextField()

Widget buildTextField(TextEditingController controller, ) {
    return Container(
      height: 40.0,
      width: 200.0,
      decoration: BoxDecoration(
        color: Colors.blueAccent,
        borderRadius: BorderRadius.circular(32),
      ),
      child: TextField(
        keyboardType: TextInputType.number,
        style: kPhoneAuthTextFields,
        decoration: InputDecoration(
          hintStyle: kPhoneAuthTextFields,
          hintText:controller.text,
          suffixIcon: Icon(Icons.phone_android,size: 20,color: Colors.white,),
          border: InputBorder.none,
          contentPadding: EdgeInsets.only(top: 5.0, left: 30.0),
        ),
        onChanged: (value) {
          controller.text = value;
        },
      ),
    );
  }

buildRaisedButton()

Widget buildRaisedButton(String label, Function callback){
    return Container(
      height: 40.0,
      width: 100.0,
      child: RaisedButton(
        child:Text(
          label,
          style: kPhoneLoginTextStyle,
        ),
        color: Colors.blue,
        //padding: EdgeInsets.all(8.0),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(40.0)),
        onPressed: callback,
      ),
    );
  }

any help, appreciated... Thanks in Advance...

Answer 1

You can copy paste run full code below
In your case, you can provide UniqueKey() in buildTextField
code snippet

Widget buildTextField(TextEditingController controller,) {
    return Container(
      key: UniqueKey(),

working demo

full code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  TextEditingController phoneController = TextEditingController();
  TextEditingController otpController = TextEditingController();

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  Widget buildTextField(
    TextEditingController controller,
  ) {
    return Container(
      key: UniqueKey(),
      height: 40.0,
      width: 200.0,
      decoration: BoxDecoration(
        color: Colors.blueAccent,
        borderRadius: BorderRadius.circular(32),
      ),
      child: TextField(
        keyboardType: TextInputType.number,
        //style: kPhoneAuthTextFields,
        decoration: InputDecoration(
          hintStyle: TextStyle(color: Colors.orange),
          hintText: controller.text,
          suffixIcon: Icon(
            Icons.phone_android,
            size: 20,
            color: Colors.white,
          ),
          border: InputBorder.none,
          contentPadding: EdgeInsets.only(top: 5.0, left: 30.0),
        ),
        onChanged: (value) {
          controller.text = value;
        },
      ),
    );
  }

  Widget buildRaisedButton(String label, Function callback) {
    return Container(
      height: 40.0,
      width: 100.0,
      child: RaisedButton(
        child: Text(
          label,
          //style: kPhoneLoginTextStyle,
        ),
        color: Colors.blue,
        //padding: EdgeInsets.all(8.0),
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(40.0)),
        onPressed: callback,
      ),
    );
  }

  resetCallback() {
    print('cleared ....');
    setState(() {
      phoneController.clear();
      otpController.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            buildTextField(phoneController),
            buildTextField(otpController),
            buildRaisedButton('Reset', resetCallback),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}