Flutter how to change color depending status from JSON API

Question

I want to change dynamically box color depending status in a JSON API. For example, Approved = Colors.green, Rejected = Colors.red, Submitted = Colors.blue.

this is the image of my current app i underline the status

how can achieve it?

this is how i get the API:

Future getCalendar() async{
  List<Events> list;

    String api = "http://200.0.0.104/api/dynamic/uspGetCalendarEvents_mobile?EmployeeId=5";
    var res = await http.get(Uri.encodeFull(api), headers: {"Accept": "application/json"});

        var data = json.decode(res.body);
        var rest = data["data"] as List;
        list = rest.map<Events>((json) => Events.fromJson(json)).toList();

    return list;
  }

this is how i loop the data :

getCalendar().then((data){

          for (var a =0; a <  data.length; a++ )
          {
             _events.addAll({DateTime.parse(data[a].start.toString().replaceAll("-", "")) :  data[a].title.toString().split(",")  });
          }
    });

this is my widget :

 Widget _buildEventList() {
    return ListView(
      children: _selectedEvents
          .map((event) => Container(
                decoration: BoxDecoration(
                  color: Colors.blue, // i want to change the color
                  border: Border.all(width: 0.8),
                  borderRadius: BorderRadius.circular(12.0),
                ),
                margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
                child: ListTile(
                  title: Text(event.toString()),
                  onTap: () => print('$event tapped!'),
                ),
              ))
          .toList(),
    );
  }

diegoveloper · Accepted Answer · 2019-07-31 05:26:00Z

5

You can create a method to return the Color according the condition (assuming event.toString() = Rejected , Approved or Submitted):


Color _getColorByEvent(String event) {
  if (event == "Approved") return Colors.green;
  if (event == "Rejected") return Colors.red;
  return Colors.blue;
}

...

BoxDecoration(
                color: _getColorByEvent(event.toString()), // i want to change the color
                border: Border.all(width: 0.8),
                borderRadius: BorderRadius.circular(12.0),
              ),

answered Jul 31, 2019 at 5:26

diegoveloper

104k25 gold badges253 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aris_choice · Accepted Answer · 2022-03-21 13:59:33Z

2

Color can be updated dynamically like:-

color: Color(int.parse("0xFF"+"c8a988"// your color key from json)// match pattern like //eg: Color(0xFF000000) for white

answered Mar 21, 2022 at 13:59

Aris_choice

4223 silver badges19 bronze badges

Comments

satish · Accepted Answer · 2019-07-31 06:30:31Z

1

Create a map key value pair, like this.

  Map<String, Color> colorCode ={"Approved":Colors.green,"Rejected":Colors.red};
eg:- 
    final color=colorCode["Approved"];

and then pass key to map you will get value to corresponding key.

answered Jul 31, 2019 at 6:30

satish

1,3843 gold badges14 silver badges33 bronze badges

Comments

Junsu Cho · Accepted Answer · 2019-07-31 05:28:12Z

0

color call method for example

 return ListView(
children: _selectedEvents
    .map((event) => Container(
          decoration: BoxDecoration(
            color: Colors.blue, // i want to change the color
            border: Border.all(width: 0.8),
            borderRadius: BorderRadius.circular(12.0),
          ),
          margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
          child: ListTile(
            title: Text(event.toString()),
            onTap: () => print('$event tapped!'),
          ),
        ))
    .toList(),
  );

}

Color _getColor(Map event){ swith(event) { return value } }

answered Jul 31, 2019 at 5:28

Junsu Cho

8647 silver badges16 bronze badges

Comments

Savad · Accepted Answer · 2020-09-01 13:19:20Z

0

This is How I did ...

Color getColorForStatus(OrderStatus event) {
      switch (event) {
        case OrderStatus.PLACED:
          return Colors.black;
          break;
        case OrderStatus.ORDER_CONFIRMED:
          return Colors.lightBlue;
          break;
        case OrderStatus.OUT_FOR_DELIVERY:
          return new Color(0xFFE5AC0E);
          break;
        case OrderStatus.DELIVERED:
          return Colors.green;
          break;
        case OrderStatus.PAYMENT_DECLINED:
          return new Color(0xFFFFA401);
          break;
        case OrderStatus.CANCELED:
          return Colors.red;
          break;
        default:
          return Colors.black;
          break;
      }
    }

answered Sep 1, 2020 at 13:19

Savad

1,64215 silver badges20 bronze badges

Collectives™ on Stack Overflow

Flutter how to change color depending status from JSON API

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related