CODEWITHSUNDEEP
flutterdartflutter-layout
sushree soma mohanty
sushree soma mohanty

Reputation: 87

How to change the color of text of a list of Cards dynamically in flutter?

enter image description here

I want to change the colors of those status texts(i.e. Pending, Cancel and Visited) as follows:

Pending --> as Lightgreen
Visited --> as Green
Cancel --> as Red

How should I do that ? Please help me doing this as I am new to flutter

Here is my code:

class AdminHomeContent extends StatefulWidget {
  @override
  _AdminHomeContentState createState() => _AdminHomeContentState();
}

    class _AdminHomeContentState extends State<AdminHomeContent> {
final List<Patient> patients = [
   Patient('Person A', 'https://images.unsplash.com/photo-1545996124-0501ebae84d0?ixid=MXwxMjA3fDB8MHxzZWFyY2h8OHx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
          8, 2, 'Pending', '10-08-2015', true),
  Patient('Person B', 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTF8fGh1bWFufGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80',
          8, 5, 'Cancel', '23-12-2019', false),
  Patient('Person C', 'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
          8, 7, 'Visited', '01-02-2019', false),
  Patient('Person D', 'https://upload.wikimedia.org/wikipedia/commons/e/ec/Woman_7.jpg',
          8, 4, 'Pending', '20-09-2018', true),
  Patient('Person E', 'https://cdn.pixabay.com/photo/2017/08/07/14/15/portrait-2604283__340.jpg',
          8, 6, 'Visited', '28-04-2017', false)
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: aapBarSection('Today\'s Appointments' , Colors.blueAccent[700], context),
      body: ListView.builder(
        itemCount: patients.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(9.0),
            child: SizedBox(
              height: 120,
              child: Card(
                elevation: 5.0,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    child: Row(
                      children: [
                        Expanded(
                          flex: 3,
                          child: Container(
                            child: CircleAvatar(
                              backgroundImage: NetworkImage(patients[index].imgPath),
                              radius: 50.0,
                            ),
                          ),
                        ),
                        Expanded(
                          flex: 5,
                          child: Container(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(patients[index].name, style: TextStyle(
                                  fontSize: 23.0,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.black87
                                ),),
                                SizedBox(
                                  height: 20,
                                ),
                                Text(patients[index].completedSession.toString() +'/'+ patients[index].totalSession.toString(),
                                style: TextStyle(
                                  fontSize: 18.0,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.black54
                                ),),
                              ],
                            ),
                          ),
                        ),
                        Expanded(
                          flex: 2,
                          child: Container(
                           child: Row(
                             crossAxisAlignment: CrossAxisAlignment.end,
                             children: [
                               Container(
                                 height: 10,
                                 width: 10,
                                 decoration: BoxDecoration(
                                   shape: BoxShape.circle,
                                   color: Colors.lightGreen,
                                 ),
                               ),
                               SizedBox(
                                 width: 8.0,
                               ),
                               Text(patients[index].status,
                               style: TextStyle(
                                 fontSize: 10.0,
                                 fontWeight: FontWeight.bold,
                                 color: Colors.lightGreen
                               ),
                               ),
                             ],
                           ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      ),
 );
  }
}

I want to change the colors of those texts as well as those dots(i.e. both dots and texts must be of same colors)

I have taken container to create those dots.

And here is my model class from which the fields are coming:

patient.dart:-

class Patient {
  String name ;
  String imgPath ;
  int totalSession ;
  int completedSession ;
  String status ;
  String dob ;
  bool isActive ;

  Patient(this.name, this.imgPath,this.totalSession,this.completedSession,this.status,this.dob,this.isActive);
}

Upvotes: 0

Views: 2148

Answers (5)

Akash Neeli
Akash Neeli

Reputation: 407

color: patients[index].status == "Pending"
                      ? Colors.lightGreen // if pending is true
                      : patients[index].status == "Visited" //if pending is false
                          ? Colors.green // if visited is true
                          : Colors.red, // if visited is false, and default

Upvotes: -1

Akash Neeli
Akash Neeli

Reputation: 407

color: patients[index].status == "Pending"
                      ? Colors.lightGreen
                      : patients[index].status == "Visited"
                          ? Colors.green
                          : Colors.red,

Upvotes: -1

John Joe
John Joe

Reputation: 12803

You can use ternary operator.

Text(patients[index].status,
  style: TextStyle(fontSize: 10.0,
   fontWeight: FontWeight.bold, color: patients[index].status == "Pending" ?  
   Colors.lightGreen ? patients[index].status == "Visited" ? Colors.green : Colors.red))

Apply the same changes for dot too.

Upvotes: 0

imgkl
imgkl

Reputation: 1082

Create a function that returns the color based on the status. Thus making the code concise. and it is always a good practice to write functions and reuse it

Use this function.

  Color getDynamicColor(String status) {
    if (status == "Pending") {
      return Colors.lightGreen;
    }
    if (status == "Visited") {
      return Colors.green;
    }
    if (status == "Cancel") {
      return Colors.red;
    }
    return Colors.black; //default color. 
 }

and use this in your text widget as such.

Text(patients[index].status,
             style: TextStyle(
              fontSize: 10.0,
               fontWeight: FontWeight.bold,
                color: getDynamicColor(patients[index].status),
    ),

 Container(
  height: 10,
     width: 10,
       decoration: BoxDecoration(
       shape: BoxShape.circle,
       color:getDynamicColor(patients[index].status),
   ),
 ),

Upvotes: 3

Ουιλιαμ Αρκευα
Ουιλιαμ Αρκευα

Reputation: 6239

You can add a method to your class and use it as you wish:

class Patient {
  ....
  Color get color {
    return status == 'Pending'
      ? Colors.lightGreen
      : status == 'Visited'
        ? Colors.green
        : Colors.red;
  }
}

Upvotes: 0

Related Questions