How to put a colour listview in an alertdialog, with the leading as the colour

Question

Hello my problem is about building a good alertdialog.

i have a Listtile Listtile where the leading is a color and the title is the name of the colour. on tap the Listtile shows a alert dialog with colour options.

this is what i am expecting to archieve.

enter image description here

i found this solution from a page but the code was really hard to scale.

i am expecting to archieve this result by using a map on the colours and printing them as Listview on the alert dialog. thanks in advance for the help

blackkara · Accepted Answer · 2021-02-02T22:30:46.583

1

Isn't this question how to send something to another page ?

Based on comment, you want to pass color with their names. So it could be pass to the second screen like this.

The first page,

var colors = {};
colors['color_x'] = 'COLORX';
colors['color_y'] = 'COLORY';

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(colors: colors),
  ),
);

In the second page,

class SecondScreen extends StatelessWidget {
  final Map colors;

  SecondScreen({Key key, @required this.colors}) : super(key: key);
  ...
}

edited Feb 02 '21 at 22:30

answered Feb 02 '21 at 21:49

blackkara

4,900
4
28
58

yes but it's more about sending a color with it's name to another page. for now i can send the color but not the name of the color. for now my approach is to keep the colors in a `_colorcolection` list . and the color names in a `_colornames`list then with a `int` called `_selectedcolor` i can choose the color and the name at the same time . But in page 1 I only need the color and when i send the information to page 2 i can't extract the index (in this case `_selectedcolor`) of the color because i am recieving only the color from page 1. – ANDREW EBARE Feb 02 '21 at 22:06
1

@ANDREWEBARE I think blackkara's answer is correct, you can pass as a parameter a map that has key: color name and value: color – FJCG Feb 02 '21 at 22:34
hello @blackkara the help was really useful to me, but i found that my biggest problem is the `alertdialog` it self, can you help me please recreate an `alertdialog` where the leading is the same color as the `title` of the `listview`? or help me with some hints thank you – ANDREW EBARE Feb 22 '21 at 09:13

score 0 · Answer 2 · answered Feb 03 '21 at 04:01

Create enum: enum ColorEnum {red, green, blue}
Page 2: Navigator.of(context).pop(ColorEnum.red);
If you using Dialog call .then after it:

showDialog().then(colorValue){ //your code };
If you using Navigator to push new page: using .then after it:

Navigator.push( context, MaterialPageRoute( builder: (context) => SecondScreen(colors: colors), ), ).then(colorValue){//yourcode}

How to put a colour listview in an alertdialog, with the leading as the colour

2 Answers2