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

Flutter – How to make dynamically with condition color

How to make my backgroundColor become dynamic color?
I have code

Expanded(
  child: ListView.builder(
    itemCount: controller.proposal.length,
    padding: EdgeInsets.zero,
    itemBuilder: (context, index) {
      var item = controller.proposal[index];
      if (item["status_proposal"] == "REJECTED") {
        var color = Colors.red;
      } else if (item["status_proposal"] == "SUBMITED") {
        var color = Colors.blue;
      } else {
        var color = Colors.green;
      }
      return Card(
        child: ListTile(
          leading: const CircleAvatar(
            backgroundColor: Colors.grey,
          ),
          title: Text(
            item["title"],
          ),
          subtitle: Text(item["deskripsi"]),
        ),
      );
    },
  ),
)

How to replace Colors.grey CircleAvatar with status_proposal color condition?

Tags:

3

Answers


  1. 0

    Define your color variable outside the if with a default value:

    Color color = Colors.grey;
 if (item["status_proposal"] == "REJECTED") {
        color = Colors.red;
      } else if (item["status_proposal"] == "SUBMITED") {
        color = Colors.blue;
      } else {
        color = Colors.green;
 }

    Pass this to the backgroundColor

    backgroundColor: color,
    Login or Signup to reply.
  2. 0

    You can make a variable with the color as Ozan’s answer suggested or you can separate the logic of choosing the appropriate color in another function.

    In your class add the following function:

    Color getCardColor(item){
switch item["status_proposal"]:
case "REJECTED":
 return Colors.red;
case "SUBMITED":
return Colors.blue;
default:
return Colors.green;
}

    In your expanded widget just call getCardColor(item)

    Expanded(
  child: ListView.builder(
    itemCount: controller.proposal.length,
    padding: EdgeInsets.zero,
    itemBuilder: (context, index) {
      var item = controller.proposal[index];
      return Card(
        child: ListTile(
          leading: const CircleAvatar(
            backgroundColor: getCardColor(item),
          ),
          title: Text(
            item["title"],
          ),
          subtitle: Text(item["deskripsi"]),
        ),
      );
    },
  ),
)
    Login or Signup to reply.
  3. 0

    There are two issues to note here in this code:

    1. Your color variable should be defined outside the if block. Otherwise the value of color that you select is only accessible within that same if block. Oman’s answer above addressed this already.

    2. Your CircleAvatar widget shound not be defined as const, otherwise you cannot set a variable value of color to it.

    This code should give you the result you wanted:

    itemBuilder: (context, index) {
  var item = controller.proposal[index];
  Color color = Colors.green;
  if (item["status_proposal"] == "REJECTED") {
    color = Colors.red;
  } else if (item["status_proposal"] == "SUBMITED") {
    color = Colors.blue;
  }
  return Card(
    child: ListTile(
      leading: CircleAvatar(
        backgroundColor: color,
      ),
      title: Text(
        item["title"],
      ),
      subtitle: Text(item["deskripsi"]),
    ),
  );
},
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search