Question 74958 in Flutter Question posted in
The official Flutter documentation can be found here.

how to assign color depending on the elements of a list – Flutter

I want to assign a different color depending on the elements of a list that displays the days of the week (from DB Supabase).
I tested the random, it’s good but I would like to assign a specific color for each day of the week.
A track ?

capture écran

Tags:

2

Answers


  1. 0

    To assign a specific color to each day of the week in a list, you can create a map of colors where the keys are the days of the week and the values are the corresponding colors. Then, when building the list, you can use the day of the week as the key to retrieve the color from the map.

    final weekDayColors = {
    0: Colors.red,
    1: Colors.orange,
    2: Colors.yellow,
    3: Colors.green,
    4: Colors.blue,
    5: Colors.indigo,
    6: Colors.purple,
  };
    Login or Signup to reply.
  2. 0

    Try with this one

     final List<Color> _colors = const [
    Color(0xFFFFFF00),
    Color(0xFF42BBF5),
    Color(0xFF00A500),
    Color(0xFF0000F5),
    Color(0xFFFF0000),
    Color(0xFF99FFF5),
    Color(0xFF000000)
  ];

  int getDays(int i) {
    if (i > 6) {
      i = 0;
    }
    return i;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  for (var i = 0; i < 30; i++)
                    Card(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            CircleAvatar(
                              backgroundColor: _colors[getDays(DateTime.now()
                                  .add(Duration(days: i))
                                  .weekday)],
                            ),
                            const SizedBox(
                              width: 10,
                            ),
                            Text(
                                'DATE IS ${DateTime.now().add(Duration(days: i))} ${DateTime.now().add(Duration(days: i)).weekday}')
                          ],
                        ),
                      ),
                    )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

    Output:
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search