TextField Widget in Flutter

TextField widget is Input box where User give their input and we can get that input and process it. Flutter provides several customisation in TextField like border, text color etc. This is the sample Program that describe some type of TextField provides by Flutter

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: Text("TextField Demo")),
        body: Center(
            child: Column(children: [
          SizedBox(height: 10),
          TextField(
            decoration: InputDecoration(
              labelText: 'Simple TextField',
            ),
          ),
          SizedBox(height: 10),
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Simple Bordered TextField',
            ),
          ),
          SizedBox(height: 10),
          TextField(
            obscureText: true,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Password Field',
            ),
          )
        ])),
      ),
    );
  }
}
  • Simple TextField: with only bottom side border like inbuild android TextBox
  • Bordered TextField: TextField with border
  • Password Field : TextField provide obscureText property for checking TextField is password or not

TextField has some properties like

  • obsureText: to check Password type or not
  • maxLines: to make TextField as TextArea
  • inputType: like number, text, email

This the output of the program :

Flutter TextField

Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *