I need help with converting the text data to an image. So I want to display red card on scorecards, I can display data with text, now I want to be able to convert that text data into an image.

This is my api response

"bookingSummary": [
                {
                    "count": 1,
                    "type": "yellow"
                },
                {
                    "count": 1,
                    "type": "straight-red"
                }
            ]

Below is how I display the text, which it does appear

Container(
                    child: Text(
                        "${(team.bookingSummary!.isEmpty) ? '' : team.bookingSummary![0].type}"),
                  )

So I want my end results to be like this

So can you please help, how do I achieve this with my code to only show red cards and as an icon.

Thank you.

CodePudding user response：

YourModel

class YourModel {
  List<BookingSummary>? bookingSummary;

  YourModel({this.bookingSummary});

  YourModel.fromJson(Map<String, dynamic> json) {
    if (json['bookingSummary'] != null) {
      bookingSummary = <BookingSummary>[];
      json['bookingSummary'].forEach((v) {
        bookingSummary!.add(BookingSummary.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    if (bookingSummary != null) {
      data['bookingSummary'] = bookingSummary!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class BookingSummary {
  int? count;
  Color? type;

  BookingSummary({this.count, this.type});

  BookingSummary.fromJson(Map<String, dynamic> json) {
    count = json['count'];
    if (json['type'] != null) {
      switch (json['type']) {
        case "yellow":
          type = Colors.yellow;
          break;
        case "straight-red":
          type = Colors.red;
          break;
        default:
          type = Colors.white;
      }
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['count'] = count;
    data['type'] = type;
    return data;
  }
}

SampleWidget

class SampleWidget extends StatelessWidget {
  SampleWidget({Key? key, required this.teamSummaries}) : super(key: key);

  final List<BookingSummary> teamSummaries;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Column(
        children: [
          Center(
              child: IntrinsicHeight(
            child: Row(
              children: [
                const Text("Chelsea"),
                const SizedBox(width: 10),
                Row(
                  children: teamSummaries
                      .map((e) {
                        if(e.count >1 ){
                          return Row(
                            children: List.generate(e.count,(index){
                             return  Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 3),
                            child: AspectRatio(
                              aspectRatio: 2 / 3,
                              child: Container(
                                color: e.type ?? Colors.white,
                              ),
                            ),
                          );
                            })
                          );
                        }
                        else {
                         return  Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 3),
                            child: AspectRatio(
                              aspectRatio: 2 / 3,
                              child: Container(
                                color: e.type ?? Colors.white,
                              ),
                            ),
                          );
                        }
                      })
                      .toList(),
                ),
              ],
            ),
          ))
        ],
      )),
    );
  }
}