Как получить определенные данные из API в приложение flutter

#flutter #dart #logic #flutter-animation #flutter-futurebuilder

#flutter #dart #Логические #flutter-анимация #flutter-futurebuilder

Вопрос:

Я новичок в flutter.

Я создал два конструктора ListView, где один ListView.builder находится внутри другого конструктора, как указано ниже. У меня есть список категорий, который находится внутри одного listview.builder, а другие — это список продуктов, которые также listview.builder Завернуты в приведенную выше сборку listview> Так что теперь мне нужно отобразить только элементы, принадлежащие 1-му listview builder, что означает, что если у меня есть категории с именем soup (1-й ListView.конструктор) Теперь мне нужно отображать только те продукты, которые относятся к категориям супов из 2-го списка.Конструктор, но все продукты перечислены внутри списка всех категорий. Итак, пожалуйста, помогите мне найти решение, любая помощь будет оценена.Заранее благодарю вас. Ниже приведены коды.

 //lib/routes/menu_description.dart(File name)
import 'package:flutter/material.dart';
import '../api_service.dart';
import 'package:html/parser.dart';
import 'package:percent_indicator/percent_indicator.dart';

class MenuDescription extends StatefulWidget {
  MenuDescription({Key key}) : super(key: key);

  @override
  _MenuDescriptionState createState() => _MenuDescriptionState();
}

int itemspressed;

class _MenuDescriptionState extends State<MenuDescription> {
  @override
  Widget build(BuildContext context) {
    return Container(
      // color: Colors.grey[200],
      child: FutureBuilder(
        future: fetchWpPosts(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.separated(
              separatorBuilder: (context, index) => Divider(
                height: 20.0,
                color: Colors.black,
              ),
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                Map wpcategoriespost = snapshot.data[index];
                return Container(
                  color: Colors.grey[200],
                  child: InkWell(
                    splashColor: Colors.grey[800],
                    onTap: () {
                      setState(() {
                        itemspressed = index;
                      });
                    },
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 5, right: 5, bottom: 5, top: 15),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Center(
                            child: Text(
                              "${wpcategoriespost['name']}",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 16.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.lightGreen[900],
                              ),
                            ),
                          ),
                          Center(
                            child: Text(
                              parse(("${wpcategoriespost['description']}")
                                      .toString())
                                  .documentElement
                                  .text,
                              style:
                                  TextStyle(fontSize: 14, color: Colors.black),
                            ),
                          ),
                          Container(
                              padding: EdgeInsets.only(top: 20.0),
                              child: Categories(),)
                        ],
                      ),
                    ),
                  ),
                );
              },
            );
          }
          return new CircularPercentIndicator(
              radius: 120.0,
              lineWidth: 13.0,
              animation: true,
              percent: 1.0,
              progressColor: Colors.orange,
              center: new Text(
                "100.0%",
                style:
                    new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
              ));
        },
      ),
    );
  }
}

class Categories extends StatefulWidget {
  @override
  _CategoriesState createState() => _CategoriesState();
}

class _CategoriesState extends State<Categories> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
        future: fetchWpPosts(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              physics: NeverScrollableScrollPhysics(),
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                Map wppost = snapshot.data[index]; 
                
                return Card(
                  margin: const EdgeInsets.only(
                    left: 15,
                    right: 15,
                    bottom: 15,
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5),
                  ),
                  elevation: 3,
                  
                  child: InkWell(
                    splashColor: Colors.grey[300],
                    onTap: () {
                      setState(() {
                        itemspressed = index;
                      });
                    },
                    
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 12, right: 5, bottom: 12, top: 5),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                "${wppost['name']}",
                                style: TextStyle(
                                    fontSize: 16.0,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.lightGreen[900]),
                              ),
                              Container(
                                height: 40,
                                width: 40,
                                decoration: BoxDecoration(
                                  shape: BoxShape.rectangle,
                                  border: Border.all(color: Colors.grey[350]),
                                  color: itemspressed == index
                                      ? Colors.grey[350]
                                      : null,
                                ),
                                child: IconButton(
                                  iconSize: 22,
                                  icon: Icon(
                                    Icons.add,
                                    color: Colors.blueAccent[400],
                                  ),
                                  onPressed: () {
                                    setState(() {});
                                    print('Add to cart');
                                  },
                                ),
                              ),
                            ],
                          ),
                          Text(
                            parse(("${wppost['description']}").toString())
                                .documentElement
                                .text,
                            style: TextStyle(fontSize: 14, color: Colors.black),
                          ),
                          Text(
                            parse(("${wppost['price']} €").toString())
                                .documentElement
                                .text,
                            style: TextStyle(
                                fontSize: 15,
                                color: Colors.amber[700],
                                fontWeight: FontWeight.bold),
                          ),
                        ],
                      ),
                    ),
                  ),
                ) ;

              },
            );
          }
          return new CircularPercentIndicator(
              radius: 120.0,
              lineWidth: 13.0,
              animation: true,
              percent: 1.0,
              progressColor: Colors.orange,
              center: new Text(
                "100.0%",
                style:
                    new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
              ));
        },
      ),
    );
  }
}

//lib/api_service.dart
import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List> fetchWpPosts() async{
final response = await http.get('https://word.tkco.in/wp-json/wc/v3/products?consumer_key=ck_94114a31e4576e61a9292f961489e7701029753eamp;consumer_secret=cs_dd4dc6e7945d8dcd14d888bc1d0ea0806b116dfb');
var convertDatatoJson = jsonDecode(response.body);

if (response.statusCode == 200) {
}

return convertDatatoJson;
}
 

Категории вверху, которые сделаны из ListView.builder, и 2-е элементы (продукты) сделаны из другого ListView.builder, который находится внутри 1-го ListView.builder

все продукты также извлекаются, где мне нужны только определенные продукты в соответствии с категориями

Комментарии:

1. Я бы изучил шаблон блоков для управления состоянием, на нем множество видеороликов YT.

2. Я изучаю шаблон блока и это займет время, но можно ли это сделать без использования блока на данный момент?