Aleteo: campos de texto degradados

Decorar campos de texto puede ser una gran tarea si tiene una aplicación grande. Hay un paquete gradient_textfield que podría hacer que esta tarea que consume mucho tiempo sea bastante simple y rápida. Aunque en Flutter podemos crear campos de texto usando TextField, especialmente para los principiantes, lleva tiempo comprender el concepto de decoración, gradiente_textfield puede hacerlo fácilmente. Veremos lo simple que es a través de ejemplos en este artículo.

Agrega la dependencia:

dependencies:
 gradient_textfield: ^0.0.1

O ejecute el siguiente comando en la terminal de IDE:

flutter pub add gradient_textfield

Importar en main.dart:

import 'package:gradient_textfield/gradient_textfield.dart';

Implementación:

Inicializar TextEditingController . 

TextEditingController name = TextEditingController();

Para crear campos de texto degradados, utilice el widget Gradienttextfield() . Podemos modificar sus propiedades como radio, altura, ancho, etc. En el futuro, el autor del paquete agregará más propiedades a Gradienttextfield .

Ejemplo 1:

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,
              ),

Producción:

Ejemplo 2:

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,
            ),

Producción:

Ejemplo 3:

Podemos crear pequeños campos de texto para tomar OTP como entrada también usando este paquete. El siguiente ejemplo muestra la forma en que podemos crear campos de texto tan pequeños con diferentes colores y estilos.

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,
                ),
              ],
            )

Producción:

Ejemplo completo:

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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Producción: