为什么我不能创建 flutter<dart> 动态类别列表？</dart>

Question

I'm trying to make a dynamic category list via flutter in Android studio, but my codes don't work even though there are no errors. why?

I follow the training program from a few years ago, although the trainer uses the old version of flutter, I was able to somehow correct the mistakes in every project he made.

The only bug in this project was the flatButton in the getCategoryWidget function in the main_screen.dart class, since the flatButton is deprecated, I used a TextButton too.

this is my main.dart

            import 'package:flutter/material.dart';
            import 'package:http_demo/screens/Main_Screen.dart';
            
            void main() {
              runApp(HttpApp());
            }
            class HttpApp extends StatelessWidget{
              @override
              Widget build(BuildContext context) {
                return MaterialApp(
                  home: MainScreen(),
                );
              }
            }

category.dart

            class Category {
              int? id;
              String? categoryName;
              String? seoUrl;
            
              Category(this.id, this.categoryName, this.seoUrl);
            
              Category.fromJson(Map json) {
                id = json["id"];
                categoryName = json["categoryName"];
                seoUrl = json["seoUrl"];
              }
              Map tojson() {
              return {"id": id, "categoryName": categoryName, "seoUrl": seoUrl};
              }
            }

category_api.dart

            import 'package:http/http.dart' as http;
            
            class  CategoryApi{
              static Future getCategories(){
                return http.get(Uri.parse("http://10.0.2.2:3000/categories"));
              }
            }

product_api.dart

            import 'package:http/http.dart' as http;
            
            class ProductApi {
              static Future getProducts() {
                return http.get(Uri.parse("http://10.0.2.2:3000/products"));
                }
            
              static Future getProductsByCategoryId(int categoryId) {
                return http.get(Uri.parse("http://10.0.2.2:3000/products?categoryId=$categoryId"));
            
              }
            }

main_screen.dart

            import 'dart:convert';
            import 'package:flutter/material.dart';
            import 'package:http_demo/data/data.api/category_api.dart';
            import '../models/category.dart';
            
            class MainScreen extends StatefulWidget {
              @override
              State<StatefulWidget> createState() {
                return MainScreenState();
              }
            }
            
            class MainScreenState extends State {
              List<Category> categories = List<Category>.empty();
              List<Widget> categoryWidgets = [];
            
              @override
              void initState() {
                getCategoriesFromApi();
                super.initState();
              }
            
              @override
              Widget build(BuildContext context) {
                return Scaffold(
                  appBar: AppBar(
                    title: const Text(
                      "Alışveriş sistemi",
                      style: TextStyle(color: Colors.white),
                    ),
                    backgroundColor: Colors.blueGrey,
                    centerTitle: true,
                  ),
                  body: Padding(
                    padding: EdgeInsets.all(10.0),
                    child: Column(
                      children: <Widget>[
                        SingleChildScrollView(
                         scrollDirection: Axis.horizontal,
                          child: Row(
                            children: categoryWidgets,
                          ),
                        )
                      ],
                    ),
                  ),
                );
              }
            
              void getCategoriesFromApi() {
                CategoryApi.getCategories().then((response) {
                  setState(() {
                    
                    Iterable list = json.decode(response.body);
                    categories =
                        list.map((category) => Category.fromJson(category)).toList();
                    getCategoryWidgets();
            
                    
                  });
                });
              }
            
              List<Widget> getCategoryWidgets() {
                for (int i = 0; i < categories.length; i++) {
                  categoryWidgets.add(getCategoryWidget(categories[i]));
                }
                return categoryWidgets;
              }
            
              Widget getCategoryWidget(Category category) {
                return TextButton(
                  onPressed: () {
            
                  },
                  style: ButtonStyle(
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15.0),
                        side: BorderSide(color: Colors.lightGreenAccent),
                      ),
                    ),
                  ),
            
                  child: Text(
                    category.categoryName!,
                    style: TextStyle(color: Colors.blueGrey),
                  ),
                );
              }
            }

I'm new to flutter and dart, where am I going wrong?

Answer 1

with minimal information I think your issue starts here:

/// Make the following adjustments assuming your api returns results.

Future<void> getCategoriesFromApi() async  {
await CategoryApi.getCategories().then((response) {
Iterable list = json.decode(response.body); //I don't think this is right. Try to print(json.decode(response.body)); and check
List<Category>  categories = list.map((category) => Category.fromJson(category)).toList();// Don't make List<Category> global
getCategoryWidgets(categories); //pass as parameter
  });
}

//Inside getCategoryWidgets(List<Categories> categories):

void getCategoryWidgets(List<Categories> categories) {

List<Widget> list = [];
for (int i = 0; i < categories.length; i++) {
     list.add(getCategoryWidget(categories[i]));
     }
setState(()=> categoryWidgets = list);
              //No return
 }

Note: Test to see if it works. no guarantees.