Flutter: aplicación de selección de color

Si la aplicación incluye un sistema de selección de colores, podemos hacerlo sin esfuerzo en Flutter usando la biblioteca flutter_colorpicker . Es fácil de personalizar, lo que ahorra tiempo y mejora la experiencia del usuario. En este artículo, crearemos selectores de color utilizando la biblioteca flutter_colorpicker . Siga para una mejor comprensión.

Instale el paquete:

Para usar esta biblioteca, primero debemos agregarla en el archivo pubspec.yaml . Elija cualquiera de los métodos a continuación para agregarlo al archivo.

Escriba el siguiente comando en la terminal del IDE de trabajo:

flutter pub add flutter_colorpicker

O simplemente agréguelo en la sección de dependencias. Luego ejecute pub get.

Paquete de importación:

Después de esto, necesitamos importar la biblioteca de la siguiente manera:

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

Implementación:

Creamos una variable Color currentColor y List<Color> currentColors. También estamos creando dos funciones:

1. changeColor(Color) – Toma el color como parámetro.
2. changeColors(List<Color>) – Toma la lista de colores como parámetro.

Cuando se invoca la función changeColor(), se cambia el valor de currentColor y cuando se invoca changeColors , se cambia la lista currentColors .

Selector de bloques:

El widget BlockPicker() requiere dos características:   pickerColor (Color) y onColorChanged (Función). Podemos personalizarlo, pero aquí estamos creando un selector de color simple usando solo estas dos propiedades. Dado que hemos establecido el color de fondo de la barra de aplicaciones como color actual, cada vez que seleccionamos cualquier color con el widget BlockPicker(), el valor de pickerColor se asigna al color de fondo de la barra de aplicaciones .

class _MyAppState extends State<MyApp> {
  Color currentColor = Colors.amber;
  List<Color> currentColors = [Colors.yellow, Colors.green];
  
  void changeColor(Color color) => setState(() => currentColor = color);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: const Text('GeeksForGeeks'),
            backgroundColor: currentColor,
            centerTitle: true,
          ),
          body: Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Expanded(
              child:  BlockPicker(
                      pickerColor: currentColor, onColorChanged: changeColor),
                 ),
          ),
        ));
  }
}

Producción:

También podemos cambiar el diseño del selector de color si queremos cambiar su estructura. Por ejemplo, en el siguiente código, estamos usando ListView.builder() para mostrar los colores en la estructura de la lista.

BlockPicker(
            pickerColor: currentColor,
            onColorChanged: changeColor,
            layoutBuilder: (context, colors, child) {
              return ListView.builder(
                  itemCount: colors.length,
                  itemBuilder: (context, idx) {
                    return GestureDetector(
                      onTap: () {
                        changeColor(colors[idx]);
                      },
                      child: Container(
                          height: 30, width: 10, color: colors[idx]),
                    );
                  });
            },
          ),

Producción:

Selector de materiales:

El widget MaterialPicker() también requiere dos propiedades: pickerColor (Color) y onColorChanged (Función). La función changeColor y changeColors sigue siendo la misma.

class _MyAppState extends State<MyApp> {
  Color currentColor = Colors.amber;
  List<Color> currentColors = [Colors.yellow, Colors.green];
  
  void changeColor(Color color) => setState(() => currentColor = color);
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: const Text('GeeksForGeeks'),
            backgroundColor: currentColor,
            centerTitle: true,
          ),
          body: Container(
            height: 600,
            child: Expanded(
              child: MaterialPicker(
                      pickerColor: currentColor, onColorChanged: changeColor)
               ),
          ),
        ));
  }
}

Producción:

Selector de bloques de elección múltiple:

Si queremos elegir varios colores a la vez, esto se puede hacer usando el widget   MultipleChoiceBlockPicker().

MultipleChoiceBlockPicker(
                pickerColors: currentColors,
                onColorsChanged: changeColors
              ),

Producción:

Código fuente completo:

import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
  
void main() => runApp(const MaterialApp(home: MyApp()));
  
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  State<StatefulWidget> createState() => _MyAppState();
}
  
class _MyAppState extends State<MyApp> {
  Color currentColor = Colors.green;
  List<Color> currentColors = [Colors.yellow, Colors.red];
  
  void changeColor(Color color) => setState(() => currentColor = color);
  void changeColors(List<Color> colors) =>
      setState(() => currentColors = colors);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: const Text('GeeksForGeeks'),
            backgroundColor: currentColor,
            centerTitle: true,
          ),
          body: SingleChildScrollView(
            child: Container(
              height: 1000,
              child: Column(
                children: [
                  Text("Block Picker"),
                  Expanded(
                    child: BlockPicker(
                        pickerColor: currentColor, onColorChanged: changeColor),
                  ),
                  SizedBox(height: 10),
                  Text("Material Picker"),
                  Expanded(
                    child: MaterialPicker(
                        pickerColor: currentColor, onColorChanged: changeColor),
                  ),
                  SizedBox(height: 10),
                  Text("MaterialChoiceBlockPicker"),
                  Expanded(
                    child: MultipleChoiceBlockPicker(
                      pickerColors: currentColors,
                      onColorsChanged: changeColors,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ));
  }
}

Producción: