Как динамически создавать Listview при нажатии на элементы карточки во флаттере?

Question

У меня есть список категорий, отображаемых в списке. Теперь я пытаюсь создать подкатегории, щелкая каждый список категорий, и отображать его в другом представлении списка во флаттере.

Для каждой категории я должен динамически создавать еще один список подкатегорий. У меня есть данные JSON и хороший список рабочих категорий. Я должен создать подкатегории на основе списка категорий.

У меня есть класс модели, который содержит детали категории и детали подкатегории.

Как я мог достичь этого?

Модельный класс

  class ProductCategoryModel {
   String categoryName;
   String categoryImage;
   String categoryId;
   List<SubCategory> subcategory;

    ProductCategoryModel(
     {this.categoryName,
     this.categoryImage,
     this.categoryId,
     this.subcategory});

    factory ProductCategoryModel.fromJson(Map<String, dynamic> json) {
    var list = json['children'] as List;
    print(list.runtimeType);
    List<SubCategory> subCategoryList =
    list.map((i) => SubCategory.fromJson(i)).toList();

   return ProductCategoryModel(
   categoryName: json['name'],
   categoryImage: json['image'],
   categoryId: json['category_id'],
   subcategory: subCategoryList,
   );
  }
 }

  class SubCategory {
  String subCategoryId;
  String subCategoryName;

  SubCategory({this.subCategoryId, this.subCategoryName});

  factory SubCategory.fromJson(Map<String, dynamic> subJson) {
     return SubCategory(
     subCategoryId: subJson['SubCategoryModel'],
      subCategoryName: subJson['name'],
     );
   }
 }

Ответ Json:

   {
    "category_id": "1",
     "name": "Vehicle",
     "column": "1",
        "children": [
           {
             "category_id": "101",
             "name": "Two Wheeler",
             "product_count": " (0)"
           },
           {
             "category_id": "102",
             "name": "Four Wheeler",
             "product_count": " (1)"
           }
        ]
      },

Answer 1

Я создал эту демонстрацию.

Проверьте это, затем спросите меня что-нибудь, если вам нужно.

Суть в том, чтобы создать новый логический список на основе ваших категорий, а затем условно отобразить подкатегории на основе этого логического списка.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool success = false;

  static List<String> categories = ['1', '2', '3'];
  static List<List<String>> subCategories = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f'],
    ['g', 'h', 'i']
  ];
  static List<bool> activeCategories = List.filled(categories.length, false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: categories.length,
        itemBuilder: (context, index) {
          return Column(
            children: <Widget>[
              SizedBox(
                height: 50,
                child: Center(
                  child: RaisedButton(
                    onPressed: () {
                      setState(() {
                        activeCategories[index] =
                            activeCategories.elementAt(index) == true
                                ? false
                                : true;
                      });
                    },
                    child: Text(
                      categories.elementAt(index),
                    ),
                  ),
                ),
              ),
              activeCategories.elementAt(index)
                  ? ListView.builder(
                      shrinkWrap: true,
                      itemCount: subCategories.length,
                      itemBuilder: (context, subIndex) {
                        return SizedBox(
                          height: 50,
                          child: Center(
                            child: Text(subCategories
                                .elementAt(index)
                                .elementAt(subIndex)),
                          ),
                        );
                      },
                    )
                  : SizedBox(),
            ],
          );
        },
      ),
    );
  }
}