如何将卡片轮播的硬编码数据更改为来自 api 响应的动态数据 -Flutter

Question

Good day. Please I am have a challenge on how to change my hardcoded data to dynamic from the api. The response to the API returns success but populating the card carousel is the challenge I am having. I keep on getting error "type 'List' is not a subtype of type 'List<Map<String, String>>'"'

This my Api request:

  SharedPreferences _prefs;

  void getCategories() async {

    try {
      _prefs = await SharedPreferences.getInstance();
      var _categoryService = CategoryService();
      var result =
          await _categoryService.getCategories(_prefs.getString('token'));
      var categories = json.decode(result.body);

      print('categories');
      print(categories);

      List<Map<String, String>> foodCategories = categories;

    } catch (e) {
      throw Exception();
    }
  }

This is my list variable with hard coded data:

 final List<Map<String, String>> foodCategories = [
    {
      'name': 'Rice Planting',
      'image': 'images/Icon-001.png',
    },
    {
      'name': 'Harvesting',
      'image': 'images/Icon-002.png',
    },
    {
      'name': 'Machineries',
      'image': 'images/Icon-003.png',
    },
    {
      'name': 'Rice Products',
      'image': 'images/Icon-004.png',
    }
  ];

And this is my screen:

  Container(
              height: 105,
              margin: const EdgeInsets.only(
                top: 20.0,
                bottom: 25.0,
              ),
              child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  padding: const EdgeInsets.only(
                    left: 20.0,
                  ),
                  itemCount: this.foodOptions.length,
                  itemBuilder: (context, index) {
                    Map<String, String> option = this.foodOptions[index];
                    return Container(
                      margin: const EdgeInsets.only(right: 35.0),
                      child: Column(
                        children: <Widget>[
                          Container(
                            width: 70,
                            height: 70,
                            margin: const EdgeInsets.only(bottom: 10.0),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(
                                Radius.circular(5.0),
                              ),
                              image: DecorationImage(
                                image: AssetImage(
                                  option['image'],
                                ),
                              ),
                              boxShadow: [
                                BoxShadow(
                                  blurRadius: 10.0,
                                  color: Colors.grey[300],
                                  offset: Offset(6.0, 6.0),
                                )
                              ],
                            ),
                          ),
                          Text(
                            option['name'],
                            style: TextStyle(fontSize: 17.0),
                          ),
                        ],
                      ),
                    );
                  }),
            ),
          

My basic challenge is how to switch this hardcoded data of **foodCategories ** to

 var categories = json.decode(result.body); which is from the API. any suggestion I will highly appreciate. The Api returns a json with image and category name

this is the UI picture

Answer 1

Declare this List in your screen widget:

final List<Map<String, String>> foodCategories = [
    {
      'name': 'Rice Planting',
      'image': 'images/Icon-001.png',
    },
    {
      'name': 'Harvesting',
      'image': 'images/Icon-002.png',
    },
    {
      'name': 'Machineries',
      'image': 'images/Icon-003.png',
    },
    {
      'name': 'Rice Products',
      'image': 'images/Icon-004.png',
    }
  ];

Add this method to your screen widget:

void getCategories() async {

    try {
      _prefs = await SharedPreferences.getInstance();
      var _categoryService = CategoryService();
      var result =
          await _categoryService.getCategories(_prefs.getString('token'));
      var categories = json.decode(result.body);

      print('categories');
      print(categories);

      setState(() {
          foodCategories = categories;
      });
      

    } catch (e) {
      throw Exception();
    }
  }

and call the method in initState:

@override
  void initState() {
    super.initState();
getCategories();
  }

Answer 2

You can use a state management tool for this use case, like Provider, on flutter.dev there is a nice explanation on how to use it Simple app state management .

Basically you wrap the api call inside a provider class and every time data comes from the api it notify the consumers that are using the provider.

Steps:

1 - Add the provider dependency to your pubspec.yaml.

name: my_name
description: Blah blah blah.

# ...

dependencies:
  flutter:
    sdk: flutter

  provider: ^6.0.0

dev_dependencies:
  # ...

2 - Create a provider for your desire state, in this case the list of categories

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../category_service.dart';

class CategoriesProvider with ChangeNotifier {
  List<Map<String, String>> foodCategories = [];
  bool loading = false;

  var _prefs;

  void getCategories() async {
    try {
      loading = true;

      _prefs = await SharedPreferences.getInstance();
      var _categoryService = CategoryService();
      var result =
      await _categoryService.getCategories(_prefs.getString('token'));
      var categories = json.decode(result.body);

      print('categories');
      print(categories);

      List<Map<String, String>> foodCategories = categories;

      loading = false;
      notifyListeners();
    } catch (e) {
      throw Exception();
    }
  }
}

3 - Create an instance of CategoriesProvider and add it to the widget tree near to the desired carrossel widget, you can read more about where to insert the provider on this link https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CategoriesProvider (),
      child: const MyApp(),
    ),
  );
}

4 - In the stateful widget you need to create a instance of the CategoriesProvider to retrieve the data from the api.

class _MyApp extends State<MyApp> {
  late CategoriesProvider categoriesProvider;
  @override
  void initState() {
    categoriesProvider = Provider.of(context, listen: false);
    categoriesProvider.getCategories();
    
    super.initState();
  }

5 - On the screen widget you can wrap your widget with a Consumer widget to retrieve the data from the provider, replacing on your example the this.foodOptions with the categories defined early on the provider class.

Consumer<CategoriesProvider>(
        builder: (context, provider, _) => Container(
          height: 105,
          margin: const EdgeInsets.only(
            top: 20.0,
            bottom: 25.0,
          ),
          child: ListView.builder(
              scrollDirection: Axis.horizontal,
              padding: const EdgeInsets.only(
                left: 20.0,
              ),
              itemCount: provider.foodCategories.length,
              itemBuilder: (context, index) {
                Map<String, String> option = provider.foodCategories[index];
                return Container(
                  margin: const EdgeInsets.only(right: 35.0),
                  child: Column(
                    children: <Widget>[
                      Container(
                        width: 70,
                        height: 70,
                        margin: const EdgeInsets.only(bottom: 10.0),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(
                            Radius.circular(5.0),
                          ),
                          image: DecorationImage(
                            image: AssetImage(
                              option['image'],
                            ),
                          ),
                          boxShadow: [
                            BoxShadow(
                              blurRadius: 10.0,
                              color: Colors.grey[300],
                              offset: Offset(6.0, 6.0),
                            )
                          ],
                        ),
                      ),
                      Text(
                        option['name'],
                        style: TextStyle(fontSize: 17.0),
                      ),
                    ],
                  ),
                );
              }),
        ),
      ),