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?

flutter-custom-text-field-single-line
Single-Line Text Field With Label
flutter-custom-text-field-multi-line
Multi-Line Text Field With Label

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.

Er. Sandeep Singh Sidhu

I am the founder of CallStem Software LLP and Stem Technocrats IT Services, Blood Wallet, Apni Boli, and of course flutterfumes.com.
I am very passionate about technology and learning new things. I believe sharing knowledge is the most powerful way to learn. One who is an active learner is always an active contributor too because whatever you learn, you should implement.

I also love to write poetry, and talking to myself is my favorite all-time activity, no matter it is a program logic, emotional poetry, or a social issue.

Previous Post
Next Post

Leave a Reply

Your email address will not be published.

Hey, wait! If You don't want to miss Flutter Updates!

Please join our Newsletter List and enjoy with daily Flutter Updates