1

hola estoy intentando desplegar un array de colores en un alertdialog, y quiero poder usar el color seleccionado para poder cambiar cosas en la UI por ejemplo el color de un ListTile. este es mi código, por ahora soy capaz de desplegar un ListTile llamado Farbe, cuando aprieto sobre Farbe me muestra la lista de colorNames. pero no tengo claro como podría seguir.

 final List<String> colorNames = [
"Green",
"Purple",
"Red",
"Orange",
"Caramel",
" Light Green",
"Blue",
"peach",
"Gray"
];

Future<String> _selectColor()async{

    Map <String, Color> _finalcolor = {

      "Green"  :  Color(0xFF0F8644),
      "Purple": Color(0xFF8B1FA9),
      "Red": Color(0xFFD20100),
      "Orange" : Color(0xFFFC571D),
      "Caramel" : Color(0xFF85461E),
      "Light Green" : Color(0xFF36B37B),
      "Blue" : Color(0xFF3D4FB5),
      "Peach" : Color(0xFFE47C73),
      "Gray" : Color(0xFF636363),

    };

        return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text('Favorite Color'),
            content: Container(
              width: double.minPositive,
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: colorNames.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(colorNames[index]),
                    onTap: () {
                      Navigator.pop(context, colorNames[index]);
                    },
                  );
                },
              ),
            ),
          );
        });
  }

mi meta es poder tener un listtile igual que este: introducir la descripción de la imagen aquí

y cuando le doy click que me despliegue este tipo de alert donde el leading es el color y el titulo del listtile sea el nombre del color. introducir la descripción de la imagen aquí

2 respuestas 2

1

Lo que puedes hacer para los ListTiles que quieres mostrar es crear una lista global de tus colores:

class ThemeColors{
  static  List<Map<String,dynamic>> finalcolor = [

    { "colorname": "Green"  , "color":  Color(0xFF0F8644),},   
    {  "colorname": "Purple" , "color": Color(0xFF8B1FA9),},
    {  "colorname": "Red" , "color": Color(0xFFD20100),},
    {  "colorname": "Orange" , "color" : Color(0xFFFC571D),},
    {  "colorname": "Caramel" , "color" : Color(0xFF85461E),},
    {  "colorname": "Light Green" , "color" : Color(0xFF36B37B),},
    {  "colorname": "Blue"  , "color": Color(0xFF3D4FB5),},
    {  "colorname": "Peach" , "color" : Color(0xFFE47C73),},
    {  "colorname": "Gray" , "color" : Color(0xFF636363),},
    ];

}

Luego generar ListTiles mediante un ListView.builder:

ListView.builder(
     itemCount: ThemeColors.finalcolor.length,
     itemBuilder:(context,index){
       final color=ThemeColors.finalcolor[index]['color'].toString();
       final colorName=ThemeColors.finalcolor[index]['colorname'] as String;
       return ListTile(
        leading:Text(color), // Aquí podrías utilizar un container con decoration
        title: Text(colorName),
         onTap:()=>{_showMyDialog(colorName,color)},
      );
     } 
    );

Y para el dialogo:

// Paso como String ya que en la variable anterior lo convertía a String,
// en tu caso debería ser un Color
void _showMyDialog(String colorName, String color){
 // Realizas la lógica para mostrar el dialogo aquí
}

Lo que puedes hacer igual es pasar el index en este método, creas en el dialogo otro ListView como en el anterior y comparas el index, si es el mismo index de la lista en tu ListTile utilizas un operador ternario para darle un estilo u otro.

Si piensas utilizar este color seleccionado en varias partes de la aplicación, deberías utilizar algún manejador de estados para que se te haga mas sencillo. Para guiarte un poco mas en esto puedes buscar como utilizar dark and light themes con Flutter.

2
  • Buena respuesta.
    – Candid Moe
    Commented el 22 feb. 2021 a las 14:25
  • @Marcelo muchisimas gracias por esto he podido solucionar el problema. de nuevo muchas gracias. Commented el 22 feb. 2021 a las 17:57
0

puedes utilizar este código si aun te sirve.

Basicamente necesitas utilizar un statefulWidget para siempre tener el color seleccionado en una variable que va a cambiar.

Como puedes ver en el showAlert, en la parte del tap solo agregue un setState y cambio la variable del color que hice. Con esto le cambio el color a un container.

Espero te sirva, saludos.

import 'package:flutter/material.dart';

class AlertScreen extends StatefulWidget {
  @override
  _AlertScreenState createState() => _AlertScreenState();
}

class _AlertScreenState extends State<AlertScreen> {
  Color _selectedColor = Color(0xFF0F8644);
  final List<String> colorNames = [
    "Green",
    "Purple",
    "Red",
    "Orange",
    "Caramel",
    "Light Green",
    "Blue",
    "Peach",
    "Gray"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alert Page'),
      ),
      body: Container(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: 50,
              width: 50,
              color: _selectedColor,
            ),
            RaisedButton(
              child: Text('Mostrar color favorito'),
              color: Colors.blue,
              textColor: Colors.white,
              shape:
                  StadiumBorder(), // Efecto de boton con borde redondeado, bien facil en flutter
              onPressed: () => _showColorDialog(context),
            ),
          ],
        ),
      ),
    );
  }

  void _showColorDialog(BuildContext context) {
    Map<String, Color> _finalcolor = {
      "Green": Color(0xFF0F8644),
      "Purple": Color(0xFF8B1FA9),
      "Red": Color(0xFFD20100),
      "Orange": Color(0xFFFC571D),
      "Caramel": Color(0xFF85461E),
      "Light Green": Color(0xFF36B37B),
      "Blue": Color(0xFF3D4FB5),
      "Peach": Color(0xFFE47C73),
      "Gray": Color(0xFF636363),
    };

    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text('Favorite Color'),
            content: Container(
              width: double.minPositive,
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: colorNames.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(colorNames[index]),
                    onTap: () {
                      setState(() {});
                      _selectedColor = _finalcolor[colorNames[index]];
                      Navigator.of(context).pop();
                    },
                  );
                },
              ),
            ),
          );
        });
  }
}
1
  • hola @deus_magna gracias por tu respuesta, aunque el problema es un poco mas complicado, he editado mi pregunta, para que puedas ver donde esta el problema ahora Commented el 22 feb. 2021 a las 12:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.