Apps Lanka.

Hello developers 

In this tutorial, we will learn how to use a Text Field widget in Flutter Application using an example.

Text Field is used to get text input from user. The default behavior of Text Field is that, when you press on it, it gets focus and a keyboard slides from the bottom of the screen. When you enter text using keyboard, the string is displayed in the TextField.

You can access the value entered in the TextField by attaching a TextEditingController to the TextField controller. Or you may also access the value using onChanged() function of TextField.

Example – Code

In this example, we are going to  display a TextField. When you press on it, a keyboard appears by default. If you start typing some input, onChanged() function triggers for every change you are making to the value of TextField and the Text widget below the TextField widget in this example is updated with the changed value of TextField.

As already mentioned you can access the value of TextField using TextEditingController as well.

Code file main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  TextEditingController nameController = TextEditingController();
  String fullName = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter TextField'),
          ),
          body: Center(child: Column(children: [
            Container(
                margin: EdgeInsets.all(20),
                child: TextField(
                  controller: nameController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Full Name',
                  ),
                  onChanged: (text) {
                    setState(() {
                      fullName = text;
                      //you can access nameController in its scope to get
                      // the value of text entered as shown below
                      //fullName = nameController.text;
                    });
                  },
                )),
            Container(
              margin: EdgeInsets.all(20),
              child: Text(fullName),
            )
          ]))),
    );
  }
}

 We are developing Mobile application and Web application for more details visit our web site www.appslanka.lk