Flutter - Gradient TextFields

Last Updated : 08 Feb, 2022

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:

Flutter - Slider with Gradient

rn540

Improve

Article Tags :

Flutter - Gradient TextFields

Add the dependency:

Import in main.dart:

Implementation:

Similar Reads

Thank You!

What kind of Experience do you want to share?