Flutter Error: Use api in tabbar and tabbarView?

Question

我想从 API 中获取数据并在 tabbar 和 tabview 中使用这些数据。

我想创建（Ayurved 应用程序），我在 api 中有一个子类别列表，我遵循了此文档，因此我需要将 api 的子类别添加到我的 TabBar。那么我该怎么做呢？我不明白这将如何发生。这是我的标签页。

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:hospital/customApiVariable.dart';
import 'package:http/http.dart' as http;

class TabPage extends StatefulWidget {
  final medicineCatUniqId;
  const TabPage({Key key, this.medicineCatUniqId}) : super(key: key);
  // const TabPage({Key key}) : super(key: key);

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

class _TabPageState extends State<TabPage> {
  var response;
  var medicineSubCategoryApi;

  @override
  void initState() {
    // TODO: implement initState
    //
    super.initState();
// for loading
    fetchData(widget.medicineCatUniqId);
  }

  fetchData(var medicineCatUniqId) async {
a2rTokenKey=carpet1234');
    var api = Uri.parse(
        '$baseUrl/productSubCatApi.php?a2rTokenKey=$a2rTokenKey&pcat=$medicineCatUniqId');
    response = await http.get(
      api,
    );

    print("medicineCatApiLnk " + api.toString());
    print("medicineCat" + response.body);

    medicineSubCategoryApi = jsonDecode(response.body);
    print("medicineCatString" + medicineSubCategoryApi.toString());
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: medicineSubCategoryApi.length,
        child: Scaffold(

          appBar: AppBar(
            title: const Text('Tabbed AppBar'),
            bottom: TabBar(
              isScrollable: true,

              tabs: medicineSubCategoryApi.map((choice) {
                return Tab(
                  text: choice.psubCatName,
                  icon: Icon(choice),

                );
              }).toList(),
            ),
          ),

          body: TabBarView(
            children: medicineSubCategoryApi.map<Widget>((choice) {
              return Padding(
                padding: const EdgeInsets.all(20.0),
                child: ChoicePage(

                  choice: choice,
                ),
              );
            }).toList(),
          ),
        ),
      ),

    );
  }
}

class ChoicePage extends StatelessWidget {
  const ChoicePage({Key key, this.choice}) : super(key: key);
  final choice;


  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
      color: Colors.white,
      child: Center(

        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            // Icon(
            //   choice,
            //   size: 150.0,
            //   color: textStyle.color,
            // ),
            Text(
              choice.psubCatName,

              style: textStyle,
            ),
          ],
        ),
      ),
    );

  }
}

这是我的 Api 数据。

[{"psubCatUniq":"60c464556cd04","psubCatName":"TURMERIC CAPSULES","psubCatDescrition":"TURMERIC CAPSULES","psubCatImg":"http:\/\/a2rstore.com\/inventory\/images\/subCategory-bb.jpg","psubCatIcon":"","psubCatDate":"","psubCatlink":"list.php?subName=TURMERIC CAPSULES&sub=60c464556cd04","pcatUniq":"60c462501a664","pcatName":"Herbal Tablets"},{"psubCatUniq":"60c464360de3f","psubCatName":"PAIN CALM TABLET","psubCatDescrition":"PAIN CALM TABLET","psubCatImg":"http:\/\/a2rstore.com\/inventory\/images\/subCategory-aa.jpg","psubCatIcon":"","psubCatDate":"","psubCatlink":"list.php?subName=PAIN CALM TABLET&sub=60c464360de3f","pcatUniq":"60c462501a664","pcatName":"Herbal Tablets"}]

Answer 1

您可以使用 FutureBuilder 小部件进行 API 调用，然后从响应数据中访问您需要的数据以创建选项卡。

一个简单的例子


@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: fetchData(widget.medicineCatUniqId),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // API data will be stored as snapshot.data 
            return  DefaultTabController(
              // Your Widget UI here ( Copy & paste ) what you have above
            );
          } else if (snapshot.hasError) {
            return Text('Error');
          } else {
            return Text('Loading');
          }
        }
      ),
    );
  }

您还需要将 fetchData() 更新为 return 值 FutureBuilder:


fetchData(var medicineCatUniqId) async {
    var api = Uri.parse(
        '$baseUrl/productSubCatApi.php?a2rTokenKey=$a2rTokenKey&pcat=$medicineCatUniqId');
    response = await http.get(
      api,
    );

    print("medicineCatApiLnk " + api.toString());
    print("medicineCat" + response.body);

    medicineSubCategoryApi = jsonDecode(response.body);
    print("medicineCatString" + medicineSubCategoryApi.toString());
    //setState(() {});
   
    return medicineSubCategoryApi;
  }

Flutter Error: Use api in tabbar and tabbarView?

Flutter Error: Use api in tabbar and tabbarView?

dart

flutter

flutter-test

flutter-dependencies

flutter-layout