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

how to use light shade of selected color variable in flutter

Here i have created a simple demo for using color shade of Color variable

I have a container with a color and and a center text which color should be lighter shade of container’s color

here is my code


List<Color> colorlist=[
  Colors.red,
  Colors.orange,
  Colors.greenAccent,
  Colors.blue,
  Colors.yellow,
];

class HomeScreen6 extends StatelessWidget {
  const HomeScreen6({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: colorlist.length,
          itemBuilder: (context,index){
        return Container(
          height: 100,
          width: double.infinity,
          color: colorlist[index],
          child: Center(
            child: Text('Sample',style: TextStyle(
              color: colorlist[index].shade200,//here i want light shade of container's color
            ),),
          ),
        );
      }),
    );
  }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I am suggested following code but i dont think its a good way of coding

    
Map<Color,Color> colorlist={
  Colors.red:Colors.red.shade100,
  Colors.orange:Colors.orange.shade100,
  Colors.greenAccent:Colors.greenAccent.shade100,
  Colors.blue:Colors.blue.shade100,
  Colors.yellow:Colors.yellow.shade100,
};


class HomeScreen6 extends StatelessWidget {
  const HomeScreen6({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {


    return Scaffold(
      body: ListView.builder(
          itemCount: colorlist.keys.length,
          itemBuilder: (context,index){
        return Container(
          height: 100,
          width: double.infinity,
          color: colorlist.keys.toList()[index],
          child: Center(
            child: Text('Sample',style: TextStyle(
              color: colorlist.values.toList()[index],
            ),),
          ),
        );
      }),
    );
  }
}

  2. 0

    Just change your list from List<Color> to List<ColorSwatch>, and then style your Text widget like this:

    style: TextStyle(
  color: colorlist[index][200],                        
),

    Btw Colors.greenAccent is not a valid ColorSwatch value.

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

Back To Top
Search