Flutter TextField Example

 In this Flutter dart tutorial, I am sharing the next flutter widget TestField. In this Flutter textField Example, easily explain how to used TextField in flutter dart. TextFields like is an EditText in Android.

TextField is used to get text input from the user end. The default behaviour of TextField is that, when you click on it, it focuses a keyboard slides from the bottom of the mobile screen. When you enter text using a keyboard, the input is showing in the TextField.

Flutter TextField  Example

In this Flutter Tutorial, we have to display a Text in TextField. When you click it, a keyboard appears by default. If you can start typing, the onChanged() function trigger for the change you are making to the value of TextField and updated with the changed value of TextField. As already mentioned you can use TextEditingController to access the value of TextField.

Let’s Open You main. dart File and used this code.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {

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

class _MyState extends State<MyApp> {

  TextEditingController nameController = TextEditingController();
  String UserName = '';


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Login Screen App'),
          ),

          body: Center(child: Column(children: <Widget>[
            Container(
                margin: EdgeInsets.all(20),
                child: TextField(
                  controller: nameController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'User Name',
                  ),
                  onChanged: (text) {
                    setState(() {
                      UserName = text;
                      //you can access nameController in its scope to get
                      // the value of text entered as shown below
                      //UserName = nameController.text;
                    });
                  },
                )),

            Container(
              margin: EdgeInsets.all(20),
              child: Text(UserName),
            )
          ]))),
    );
  }

}

Read more flutter tutorials and solutions click here