How to use colors and titles inside flutter lists and maps

user_18126081 0
Viewed 236

enter image description here

enter image description here

Help post .... As you can see in the flutter code. I was trying to figure out how to see apps with colors and titles with a map inside a list, but I could see the titles. There was a problem with the colors. How can I fix this? So that I can see my color and title

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  final myCatagory = [
    {
      'title': 'Samsung',
      'color': Colors.pink[800],
    },
    {
      'title': 'Symphony',
      'color': Colors.tealAccent[800],
    },
    {
      'title': 'MI',
      'color': Colors.amberAccent[800],
    },
    {
      'title': 'Oppo',
      'color': Colors.blue[800],
    },
    {
      'title': 'Vivo',
      'color': Colors.redAccent[800],
    },
    {
      'title': 'Iphone',
      'color': Colors.greenAccent[800],
    },
  ];

  // final catagoryColors = [
  //   Colors.red,
  //   Colors.green,
  //   Colors.black87,
  // ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: const Text('My Blog'),
        backgroundColor: Colors.redAccent,
      ),
      body: Container(
        height: 150,
        child: ListView.builder(
          itemCount: myCatagory.length,
          shrinkWrap: true,
          primary: false,
          physics: BouncingScrollPhysics(),
          scrollDirection: Axis.horizontal,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              margin: EdgeInsets.only(
                left: 10,
                top: 10,
              ),
              color: myCatagory[index]['color'], **The problem in this line**
              height: 200,
              width: 100,
              child: Text(
                '${myCatagory[index]['title']}',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 15,
                  fontWeight: FontWeight.w400,
                ),
              ),
            );
          },
        ),
      ),
    );
  }enter image description here

enter code here
dart flutter
3 Answers

When you hover over the error the IDE will tell you what's wrong

enter image description here

The compiler can't tell that this is a Color. The solution is to cast it to a Color since you are certain that this is a Color object, like:

color: myCatagory[index]['color'] as Color,
user_15148610

myCategory is a type of List<Map<String, Object?>>

You need to cast to a Color like so: myCatagory[index]['color'] as Color,

You'll see the warning when you hover over the red line. Something in the line of

A value of type 'Object?' can't be assigned to a variable of type 'Color'

A nicer way to structure your list would be to use a map

final Map<String, Color> myCategories = {
 'Samsung': Colors.pink[800],
 'Symphony': Colors.tealAccent[800],
 //the others ...
}

And then get the color: myCategories.entries.elementAt(index).value

And the title: myCategories.entries.elementAt(index).key

user_67040330

You can add it as a hex value and parse it to int like:

 {
      'title': 'Symphony',
      'color': '0xFFB74093',
    },

color:  Color(int.parse(myCatagory[index]['color'].toString())),
user_162128280
Related