Flutter Custom TextField With Label

TextField is most useful and used field in any development platform same as in Flutter Development. In this tutorial, we will learn how to make a flutter custom textfield along with attached Label. We will add some important mandatory and optional fields. You can add more fields as per requirement. Flutter custom text field has common features which need in development.

Flutter Custom TextField will increase your development speed and save your time by calling it directly as static methods where it is needed. Let’s start.

What we will get in output?

Code for making customer TextField, you can place this in a separate class, or if want to keep in the same class then remover static from the beginning. For example

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class CustomWidgets {
  static Widget textField(String title,
      {bool isPassword = false,
      bool isNumber = false,
      int length,
      TextEditingController textController,
      int lines = 1}) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 2),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 10,
          ),
          Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
          ),
          SizedBox(
            height: 2,
          ),
          TextFormField(
            maxLines: lines,
            controller: textController,
            maxLength: length,
            inputFormatters: [
              LengthLimitingTextInputFormatter(length),
            ],
            obscureText: isPassword,
            keyboardType: isNumber ? TextInputType.number : TextInputType.text,
            decoration: InputDecoration(
                counterText: '',
                border: InputBorder.none,
                fillColor: Color(0xfff3f3f4),
                filled: true),
          )
        ],
      ),
    );
  }
}

How To Use? Its very simple, let’s see

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_custom_textfield/custom_widgets.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Text Field'),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(30),
          child: Column(
            children: [
              CustomWidgets.textField('Single-Line Text Field'),
              SizedBox(
                height: 10,
              ),
              CustomWidgets.textField('Multi-Line Text Filed', lines: 3),
              SizedBox(
                height: 10,
              ),
              CustomWidgets.textField('Password Field', isPassword: true),
              SizedBox(
                height: 10,
              ),
              CustomWidgets.textField('Number Password Field',
                  isPassword: true, isNumber: true, length: 10),
              SizedBox(
                height: 10,
              ),
              CustomWidgets.textField('Corner Radius', cornerRadius: 10.0),
            ],
          ),
        ),
      ),
    );
  }
}

You can download full source code.