I am making an app which takes values through JSON parsing. My app has multiple tabs but each time im swiping between tabs, the JSON sends a new read request every time. Below is my code:
Home.dart (Holds the navigation tab)
import 'package:flutter/material.dart';
import './First.dart' as first;
import './Second.dart' as second;
import './Third.dart' as third;
import './Fourth.dart' as fourth;
import './Fifth.dart' as fifth;
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
final List<NewPage> _tabs = [
new NewPage(title: "Providers Near Me",color: Colors.blue[500]),
new NewPage(title: "Providers Search",color: Colors.blueGrey[500]),
new NewPage(title: "Providers List",color: Colors.teal[500]),
new NewPage(title: "My Info",color: Colors.indigo[500]),
new NewPage(title: "My Dependents Info",color: Colors.red[500]),
];
NewPage _myHandler;
TabController tabController;
String pos = 'top';
void initState(){
super.initState();
tabController = new TabController(length: 5, vsync: this);
_myHandler = _tabs[0];
tabController.addListener(_handleSelected);
}
void _handleSelected() {
setState(() {
_myHandler = _tabs[tabController.index];
});
}
@override
void dispose() {
tabController.dispose();
super.dispose();
}
///
/// This method defines the different tabs in the Tab Bar. This is the
/// constructor for the Navigation Bar that will be used by the user most.
///
TabBar navbar (){
return TabBar(
controller: tabController,
tabs: <Widget>[
new Tab(
icon: new Icon(Icons.healing),
),
new Tab(
icon: new Icon(Icons.search),
),
new Tab(
icon: new Icon(Icons.list),
),
new Tab(
icon: new Icon(Icons.person),
),
new Tab(
icon: new Icon(Icons.group),
),
],
);
}
///
/// This method returns the App Bar properties. Its takes in an argument to
/// determining if the Tab Bar should be at the top or at the bottom of the
/// screen. If the Tab Bar is to be at the top of the screen, it will return
/// the AppBar with the bottom property. If the Tab Bar is to be at the
/// bottom, it will return the AppBar without the bottom property
///
AppBar barController(String position){
if (position == 'top'){
return AppBar(
title: new Text(_myHandler.title),
backgroundColor: _myHandler.color,
bottom: navbar(),
);
}
else if (position == 'bottom'){
return AppBar(
title: new Text(_myHandler.title),
backgroundColor: _myHandler.color,
);
}
else{
return null;
}
}
///
/// This method controls the Navigation Bar at the bottom of the page. If the
/// navigation bar is to be displayed at the bottom, then the navigation bar
/// will be returned. Else, null will be returned.
///
Material bottomBarController(String disp){
if (disp == 'bottom'){
return Material(
color: _myHandler.color,
child: navbar(),
);
}
else{
return null;
}
}
@override
Widget build(BuildContext context){
return new Scaffold(
endDrawer: new AppDrawer(),
appBar: barController(pos),
body: new TabBarView(
children: <Widget>[
new first.First(),
new second.MapPage(),
new third.Third(),
new fourth.Fourth(),
new fifth.Fifth(),
],
controller: tabController,
),
bottomNavigationBar: bottomBarController(pos)
);
}
}
// Appdrawer
// This method opens a drawer where more settings are available to control
// according to user needs.
class AppDrawer extends StatefulWidget {
@override
_AppDrawerState createState() => _AppDrawerState();
}
class _AppDrawerState extends State<AppDrawer> {
bool _value = false;
String message = "This is true";
void onChanged(bool value){
if(value){
setState(() {
message = "This is true";
print(message.toString());
String pos = "top";
_value = true;
});
}else{
setState(() {
message = "This is false";
print(message.toString());
String pos = "bottom";
_value = false;
});
}
}
@override
Widget build(BuildContext context) {
return Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: new Text("Suman Kumar"),
accountEmail: new Text ("[email protected]"),
),
new ListTile(
title: new Text("Settings"),
trailing: new Icon(Icons.settings),
),
new SwitchListTile(
title: new Text("NavBar Position"),
activeColor: Colors.indigo,
value: _value,
onChanged: (bool value){
onChanged(value);
new Text (message);
}
),
new ListTile(
title: new Text("Close"),
trailing: new Icon(Icons.cancel),
onTap: () => Navigator.pop(context),
),
],
),
);
}
}
class NewPage {
final String title;
final Color color;
NewPage({this.title,this.color});
}
Fourth.dart (One of the class which calls the JSON api)
import 'package:flutter/material.dart';
import 'package:emas_app/Dependant.dart' as Dep;
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'model/crm_single_user_model.dart';
final String url = "http://crm.emastpa.com.my/MemberInfo.json";
//Future class for single user information
Future<SingleUser> fetchUser() async{
final response = await http.get(url);
final jsonresponse = json.decode(response.body);
return SingleUser.fromJson(jsonresponse[0]["Employee"]);
}
Future<String> jsonContent() async {
var res = await http.get(
Uri.encodeFull(
"http://crm.emastpa.com.my/MemberInfo.json"),
headers: {"Accept": "application/json"});
return res.body;
}
class Fourth extends StatefulWidget {
@override
FourthState createState() {
return new FourthState();
}
}
class FourthState extends State<Fourth> {
//String name;
@override
Widget build(BuildContext context) {
//New body widget
Widget newbody = new Container(
child: new Center(
child: new FutureBuilder(
future: fetchUser(),
builder: (context, snapshot) {
if (snapshot.hasData) {
var userdata = snapshot.data;
//get the data from snapshot
final name = userdata.name;
final id = userdata.identification;
final company = userdata.company;
final dob = userdata.dob;
return new Card(
child: new Column(
children: <Widget>[
new ListTile(
title: new Text("Name"),
subtitle: new Text(name),
),
new ListTile(
title: new Text("Identification"),
subtitle: new Text(id),
),
new ListTile(
title: new Text("Company"),
subtitle: new Text(company),
),
new ListTile(
title: new Text("Date of Birth"),
subtitle: new Text(dob),
),
const Divider(
color: Colors.white,
height: 50.0,
),
new MaterialButton(
color: Colors.indigo,
height: 50.0,
minWidth: 50.0,
textColor: Colors.white,
child: new Text("More"),
onPressed: (){
Navigator.push(context,
new MaterialPageRoute(
builder: (context) => new Dep.Dependents(name: name,)
));
},
),
],
),
);
} else if(snapshot.hasError){
return new Text(snapshot.error);
}
return new Center(
child: new CircularProgressIndicator(),
);
},
),
),
);
return new Scaffold(
body: newbody,
);
}
}
crm_single_user_model.dart (Fourth.dart model class)
class SingleUser{
final String name, identification, company, dob;
SingleUser({this.name, this.identification, this.company, this.dob});
factory SingleUser.fromJson(Map<String, dynamic> ujson){
return SingleUser(
name: ujson["Name"].toString(),
identification: ujson["Identification"].toString(),
company: ujson["Company"].toString(),
dob: ujson["DateOfBirth"].toString()
);
}
}
Is there any way to call the api just once in Home.dart and not repeatedly send a new read request everytime i go into Fourth.dart?
Any assistance is very much appreciated.
See Question&Answers more detail:
os 
