TextFormField Clear And Set Text Value In Flutter

TextFormField Clear And Set Text Value In Flutter :

TextField and TextFormField both are flutter widget, that commonly used to input the text, get the text and clear or empty value in forms likes for

– TextField and TextFormField: widget

– TextField and TextFormField: inbuilt method.

– TextEditingController.clear() which is used to clear or empty the typed text inside the Text Input widget.

TextField and TextFormField various operation: –

User input
– Set the value.
– For example your profile edit page get the value another page set the current page that time set the value initState().
– get the value (quickly gather user value).
– clear value.

User input
1) Login
2) Sign up
3) Change password

How to Clear value textfield in flutter?

1) When user any search value but user something to search then clear text from textfield widget.
– Textfield provide set the suffix icon that used to password hide and show. – clear text button press.

TextEditingController provides the various functionality in flutter:

final _emailController = TextEditingController();

1) _emailController.clear();

2) _emailController.text = ‘Flutter tutorial’; set the value.

3) _emailController.text; get the value. String getValue = _emailController.text;

Screenshot :

TextFormField Clear And Set Text Value In Flutter

How to set value TextFormField in flutter

_controller.text = 'username';
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Tutorial',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter TextField Clear and Set Value'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _textController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    _textController.text = 'Hello Flutter'; //Set value

    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: Center(child: TextField(
          controller: _textController,
          decoration: InputDecoration(
              hintText: "Username",
              suffixIcon: CircleIconButton(
                onPressed: () {
                  this.setState(() {
                    _textController.clear(); //Clear value
                  });
                },
              )),
        )));
  }
}

class CircleIconButton extends StatelessWidget {
  final double size;
  final Function onPressed;
  final IconData icon;

  CircleIconButton({this.size = 30.0, this.icon = Icons.clear, this.onPressed});

  @override
  Widget build(BuildContext context) {
    return InkWell(
        onTap: this.onPressed,
        child: SizedBox(
            width: size,
            height: size,
            child: Stack(
              alignment: Alignment(0.0, 0.0), // all centered
              children: <Widget>[
                Container(
                  width: size,
                  height: size,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Colors.grey[300]),
                ),
                Icon(
                  icon,
                  size: size * 0.6, // 60% width for icon
                )
              ],
            )));
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in