How to clear Flutter Text Field from parent widget

Question

How to clear Flutter Text Field from parent widget

I am a newbie for flutter and dart. I am developing a calculator type application.

I want to clear the text field in the TextFieldContainer1 class from my parent widget Calculator method using method function.

This is the parent widget (Calculator) which contains reset function.

class Calculator extends StatefulWidget {
  @override
  _CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State<Calculator> {

  double soldPrice=0.00;

  reset(){
      soldPrice=0.00;
   }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: BgColor ,
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          borderRadius:BorderRadius.only(topLeft: Radius.circular(10), topRight:Radius.circular(10) ),
          color:YellowBg,
        ),
        alignment: Alignment.center,
        height: 50,

        child: Text('RESET',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.w500,
          letterSpacing: 5,

        ),
        ),
      ),

      body: SafeArea(
              child: Column(
          children: <Widget>[
            SizedBox(height:10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                EcalLogo(logoSize: 30,),  
              ],
            ),
            SizedBox(height:10),


            Padding(
              padding:EdgeInsets.symmetric(horizontal:10.0),
              child:FractionallySizedBox(
                widthFactor: 0.9,
                child: Container(
                height:1.0,
                width:130.0,
                color:Colors.white,),
              ),),

            SizedBox(height: 10,),

            Expanded(
              child:ListView(
                children: <Widget>[

                  TextFieldContainer1(
                    title: 'SOLD PRICE',
                    tagLine: "SALE PRICE WITOHUT SHIPPING",
                    icon: Icons.check_circle,

                     onChange: (val) => setState(() {
                          soldPrice = double.parse(val);

                        })

                  ),

                ],
            ))


          ],
        ),
      )

    );
  }
}

This is the child widget class(TextFieldContainer1)

class TextFieldContainer1 extends StatefulWidget {
  final String title;
  final String tagLine;
  final IconData icon;
  final Function(String) onChange;

  // Function displayFunction;

  TextFieldContainer1({this.title,this.tagLine,this.icon,this.onChange});


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

class _TextFieldContainer1State extends State<TextFieldContainer1> {




  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: 0.95,
        child: Container(

          padding: EdgeInsets.symmetric(horizontal:20, vertical:5),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            color: tileBackground,
          ),                      
          height: 57,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children:<Widget>[
              Container(
                child:Column(

                  children:<Widget>[
                    Row(

                      children:<Widget>[
                        Icon(widget.icon,
                        color:Color.fromRGBO(255, 255, 255, 0.7),
                        size:20
                        ),
                        SizedBox(width:15),
                        Text(widget.title,
                        style: TextStyle(

                          fontSize: 20,
                          color:Colors.white,
                          fontWeight: FontWeight.w500
                        ),
                        )
                      ]          
                    ),
                    Text(widget.tagLine,
                    style: TextStyle(
                      color:Color.fromRGBO(255, 255, 255, 0.5),
                      fontSize: 12
                    ),
                    )
                  ]
                )
              ),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 15,vertical: 5),
                decoration: BoxDecoration(
                  color: Color.fromRGBO(252, 205, 0, 0.2),
                  borderRadius: BorderRadius.all(Radius.circular(10)
                  )
                ),
                height: 40,
                width: 92,
                child: TextField(
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20
                  ),
                  autofocus: false,
                  decoration:InputDecoration( 
                    focusColor: YellowBg,
                    fillColor: YellowBg,
                    hoverColor: YellowBg,
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: YellowBg),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: YellowBg),)
                  ) ,
                  keyboardType: TextInputType.number,

                  onChanged: widget.onChange,
                ),
              )
            ],
          ),


      ),
    );
  }
}

How to clear the text field in the TextFieldContainer1 class from my parent widget Calculator using the reset function?

Answer 1

make your text field accept a controller:

class TextFieldContainer1 extends StatefulWidget {
  final String title;
  final String tagLine;
  final IconData icon;
  final Function(String) onChange;
  final TextEditingController controller;

  // Function displayFunction;

  TextFieldContainer1({this.title,this.tagLine,this.icon,this.onChange, 
  this.controller});


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

class _TextFieldContainer1State extends State<TextFieldContainer1> {



// also don't forget to dispose the controller 
 @override
  void dispose() {
    super.dispose();
    _controller.dispose();
   }

   }

and use it in your widget like this:

class Calculator extends StatefulWidget {
  @override
  _CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State<Calculator> {

  final _controller = TextEditingController();
  double soldPrice=0.00;

  reset(){
      soldPrice=0.00;
   }

  @override
  Widget build(BuildContext context) {
   // ....
                  TextFieldContainer1(
                    title: 'SOLD PRICE',
                    tagLine: "SALE PRICE WITOHUT SHIPPING",
                    icon: Icons.check_circle,
                    controller: _controller,
                     onChange: (val) => setState(() {
                          soldPrice = double.parse(val);

                        }),

                  ),

                ],
            ))

void reset() => _controller.clear();

// ....