Open In App

Flutter – Gradient TextFields

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 08 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads