TextFormField Clear And Set Text Value In Flutter

TextFormField Clear And Set Text Value In Flutter :

This flutter tutorial post how to clear TextFormField / TextField value in flutter.

Solution: _controller.clear();

final TextEditingController _controller = new TextEditingController();

TextField(
      controller: _textController,
      decoration: InputDecoration(hintText: "Flutter"),
    ),

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