TextField Widget in Flutter

Example 1:

 

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return DemoAppState();
  }
}

class DemoAppState extends State<DemoApp> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: EdgeInsets.symmetric(horizontal: 30),
          child: Center(
            child: TextField(),
          ),
        ), //
      ),
    );
  }
}

Example 2:

TextField(
              decoration: InputDecoration(
                border: InputBorder.none,
              ),
            ),


Example 3:

TextField(
              decoration: InputDecoration(
                border: InputBorder.none,
                labelText: "First Name",
              ),
            ),


Example 4:


TextField(
              keyboardType: TextInputType.number,
            ),


Example 5:

TextField(
              autofocus: true,
            ),


Example 6:

TextField(
              enabled: false,
            ),


Example 7:

TextField(
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.orange,
              ),
            ),


Example 8:

TextField(
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.orange,
                border: OutlineInputBorder(
                  borderSide: BorderSide.none,
                ),
              ),
            ),


Example 9:

TextField(
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.orange,
                border: OutlineInputBorder(
                  borderSide: BorderSide.none,
                  borderRadius: BorderRadius.circular(30),
                ),
              ),
            ),


Example 10:

TextField(
              decoration: InputDecoration(
                hintText: 'Email',
              ),
            ),


Example 11:


TextField(
              decoration: InputDecoration(
                hintText: 'Email',
                hintStyle: TextStyle(
                  color: Colors.red,
                  fontSize: 20,
                ),
              ),
            ),


Example 12:


TextField(
              decoration: InputDecoration(
                hintText: 'Email',
                helperText: 'or username',
              ),
            ),


Example 13:


TextField(
              decoration: InputDecoration(
                hintText: 'Email',
                border: InputBorder.none,
              ),
            ),


Example 14:


TextField(
              decoration: InputDecoration(
                hintText: 'Email',
                border: OutlineInputBorder(),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.red,
                    width: 5,
                  ),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.purpleAccent,
                  ),
                ),
              ),


Example 15:


TextField(
              decoration: InputDecoration(
                hintText: 'Email',
                border: OutlineInputBorder(),
              ),
            ),


Example 16:


TextField(
              decoration: InputDecoration(
                hintText: 'Email',
                border: OutlineInputBorder(),
                icon: Icon(Icons.person),
              ),
            ),


Example 17:


TextField(
              decoration: InputDecoration(
                hintText: 'Email',
                border: OutlineInputBorder(),
                suffix: Icon(
                  Icons.person,
                  color: Colors.blue,
                ),
              ),
            ),


Example 18:


TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                suffixText: 'User',
              ),
            ),


Example 19:


TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                prefix: CircularProgressIndicator(),
              ),
            ),


Example 20:


TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              cursorColor: Colors.green,
              cursorWidth: 5,
            ),


Example 21:


TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              cursorColor: Colors.green,
              cursorWidth: 10,
              cursorHeight: 10,
            ),


Example 22:


TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              showCursor: false,
            ),


Example 23:


TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              maxLines: 1,
            ),


Example 24:


TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              maxLines: null,
            ),


Example 25:


TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              maxLength: 4,
            ),


Example 26:


TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              obscureText: true,
            ),


Example 27:


TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              obscureText: true,
              obscuringCharacter: '*',
            ),


Example 28:


TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              toolbarOptions: ToolbarOptions(
                copy: true,
                cut: true,
                selectAll: true,
                paste: true,
              ),
            ),

Video Link:

Post a Comment (0)
Previous Post Next Post