Flutter – Gradient TextFields

Decorating text fields can be a big task if you have a large application. There is a package gradient_textfield that could make this time-consuming task pretty simple and fast. Although in Flutter we can create text fields using TextField, for beginners especially, it takes time to understand decoration concept, gradient_textfield can do this easily. We will see how simple it is through examples in this article.

Add the dependency:

Dart

dependencies:
 gradient_textfield: ^0.0.1

Or run the following command in the terminal of IDE:

flutter pub add gradient_textfield

Import in main.dart:

Dart

import 'package:gradient_textfield/gradient_textfield.dart';

Implementation:

Initialize TextEditingController. 

Dart

TextEditingController name = TextEditingController();

To create gradient text fields use Gradienttextfield() widget. We can modify its properties like radius, height, width, etc. In the future, there will be more properties added to Gradienttextfield by the package author.

Example 1:

Dart

Gradienttextfield(
                controller: name,
                radius: 40,
                height: 60,
                width: 400,
                colors: const [Colors.pink, Colors.red, Colors.orange],
                text: "Enter Name",
                fontColor: Colors.black,
                fontSize: 15,
                fontWeight: FontWeight.normal,
              ),

Output:

Example 2:

Dart

Gradienttextfield(
              controller: name,
              radius: 2,
              height: 60,
              width: 400,
              colors: const [Colors.yellow, Colors.green],
              text: "Enter Email",
              fontColor: Colors.black,
              fontSize: 15,
              fontWeight: FontWeight.normal,
            ),

Output:

Example 3:

We can create small text fields for taking OTP as input also using this package. The below example shows the way we can create such small text fields with different colors and styles.

Dart

Row(
              children: [
                Gradienttextfield(
                  controller: name,
                  radius: 40,
                  height: 60,
                  width: 60,
                  colors: const [Colors.grey, Colors.black],
                  text: "ABC",
                  fontColor: Colors.white,
                  fontSize: 15,
                  fontWeight: FontWeight.normal,
                ),
                Gradienttextfield(
                  controller: name,
                  radius: 40,
                  height: 60,
                  width: 60,
                  colors: const [Colors.green, Colors.yellow],
                  text: "DEF",
                  fontColor: Colors.white,
                  fontSize: 15,
                  fontWeight: FontWeight.normal,
                ),
                Gradienttextfield(
                  controller: name,
                  radius: 0,
                  height: 60,
                  width: 60,
                  colors: const [Colors.grey, Colors.black],
                  text: "GHI",
                  fontColor: Colors.white,
                  fontSize: 15,
                  fontWeight: FontWeight.normal,
                ),
                Gradienttextfield(
                  controller: name,
                  radius: 20,
                  height: 60,
                  width: 60,
                  colors: const [Colors.deepPurple, Colors.blue],
                  text: "JKL",
                  fontColor: Colors.white,
                  fontSize: 15,
                  fontWeight: FontWeight.normal,
                ),
              ],
            )

Output:

Full Example:

Dart

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

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

class MyApp extends StatelessWidget {
  TextEditingController name = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Create Gradient TextFields',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          centerTitle: true,
        ),
        body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Gradienttextfield(
                controller: name,
                radius: 40,
                height: 60,
                width: 400,
                colors: const [Colors.pink, Colors.red],
                text: "Enter Name",
                fontColor: Colors.black,
                fontSize: 15,
                fontWeight: FontWeight.normal,
              ),
              SizedBox(height: 20),
              Gradienttextfield(
                controller: name,
                radius: 2,
                height: 60,
                width: 400,
                colors: const [Colors.green, Colors.yellow],
                text: "Enter Email",
                fontColor: Colors.black,
                fontSize: 15,
                fontWeight: FontWeight.normal,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output: