Flutter: How to navigate to specific tabbar with FutureBuilder?

Question

I made a simple store app where I put data in a json file. I've managed to call the data into the Tabbar & TabbarView by FutureBuilder. Also I put the list of these products in a drawer . I want if I click on one of the product names from Drawer, it will navigate to specific TabBar respective IDs .

I've done this trick before, but only on static pages, not FutureBuilder like this. I really appreciate any help

HomePage.dart

import 'dart:convert';

import 'package:contoh_tabbar_json/model.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  
  Future<List<Product>> _getProduct() async {
    final dataString = await rootBundle.loadString('assets/myproduct.json');
    final List<dynamic> json = jsonDecode(dataString);
    final products = <Product>[];
    for (var v in json) {
      products.add(Product.fromJson(v));
    }
    return products;
  }

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

  @override
  void dispose() {
    super.dispose();
  }

  Product product;
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Product>>(
      future: _getProduct(),
      builder: (context, mydata) {
        if (mydata.hasData) {
          List<Tab> tabs = <Tab>[];
          for (int index = 0; index < mydata.data.length; index++) {
            tabs.add(Tab(
              child: Text(
                mydata.data[index].title,
              ),
            ));
          }
          return DefaultTabController(
            length: mydata.data.length,
            child: Scaffold(
              endDrawer: Drawer(
                child: SingleChildScrollView(
                  physics: const ScrollPhysics(),
                  child: Column(
                    children: [
                      Center(
                        child: Container(
                          height: 100,
                          alignment: Alignment.center,
                          child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
                            decoration: const BoxDecoration(
                              borderRadius: BorderRadius.all(
                                Radius.circular(50),
                              ),
                            ),
                            child: const Text("Product List",
                                style: TextStyle(
                                  fontSize: 17,
                                  fontWeight: FontWeight.w700,
                                ),
                                textAlign: TextAlign.center),
                          ),
                        ),
                      ),
                      //
                      ListView.builder(
                          physics: const NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                          itemCount: mydata.data.length,
                          itemBuilder: (BuildContext context, index) {
                            return ListTile(
                              dense: true,
                              title: Text(mydata.data[index].title, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w500)),
                              onTap: () {
                                Navigator.pop(context);
                              },
                            );
                          }),
                      const SizedBox(height: 70),
                    ],
                  ),
                ),
              ),
              appBar: AppBar(
                title: const Text("My Store"),
                bottom: TabBar(
                  isScrollable: true,
                  tabs: tabs,
                ),
              ),
              body: FutureBuilder<List<Product>>(
                future: _getProduct(),
                builder: (context, mydata) {
                  if (mydata.hasData) {
                    List<Widget> tabs = <Widget>[];

                    for (int index = 0; index < mydata.data.length; index++) {
                      tabs.add(Tab(
                        child: SingleChildScrollView(
                          physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
                          child: Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 0),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                const SizedBox(height: 30),
                                Text(
                                  mydata.data[index].title,
                                  textAlign: TextAlign.center,
                                  style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                                ),
                                const SizedBox(height: 30),
                                Text(mydata.data[index].title),
                                const SizedBox(height: 30),
                                Text(mydata.data[index].description),
                                const SizedBox(height: 30),
                                Text(mydata.data[index].category),
                              ],
                            ),
                          ),
                        ),
                      ));
                    }
                    return TabBarView(
                      children: tabs,
                    );
                  }
                  return Container();
                },
              ),
            ),
          );
        }
        return Scaffold(
          body: Center(child: Text(mydata.hasError ? mydata.error.toString() : "Loading...")),
        );
      },
    );
  }
}

Model

import 'dart:convert';

List<Product> productFromJson(String str) =>
    List<Product>.from(json.decode(str).map((x) => Product.fromJson(x)));

class Product {
  Product({
    this.id,
    this.title,
    this.description,
    this.category,
  });

  final int id;
  final String title;
  final String description;
  final String category;
  factory Product.fromJson(Map<String, dynamic> json) => Product(
        id: json["id"],
        title: json["title"],
        description: json["description"],
        category: json["category"],
      );

  String getTitle() {
    return title;
  }

  String getDescription() {
    return description;
  }

  String getCategory() {
    return category;
  }
}

Answer 1

Mungkin bisa dicek pada github saya:

https://github.com/kuldii/navigate_drawer_tabbar