Flutter: How to navigate to specific tabbar with FutureBuilder? - json

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