How to set the text value dynamically from the json in flutter - dart

Question

Hi friends how to set the text value dynamically I am using the JSON to get the data but when I refresh the data is populating and I am calling the JSON at initstate to per load before the page of the app starts sorry friends I don't know much about the flutter so please help me out about it please find the code below
String name, userimage, birth, c_id, email, mobile_number;
class Profile extends StatefulWidget {
#override
State<StatefulWidget> createState() {
Profile_Customer profile_customer() => Profile_Customer();
return profile_customer();
}
}
class Profile_Customer extends State<Profile> {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Profile'),
backgroundColor: primarycolor,
leading: new IconButton(
icon: new Icon(Icons.arrow_back),
onPressed: () {
Navigator.pushReplacement(
context,
new MaterialPageRoute(
builder: (context) => new HomeScreen()));
}),
),
body: new Builder(builder: (BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
child: new Image.asset('assets/rural_post_logo.png',
fit: BoxFit.cover),
margin: EdgeInsets.only(bottom: 15.0),
),
new Container(
child: new CircleAvatar(
child: new Image.network(userimage,
width: 100.0, height: 100.0, fit: BoxFit.cover),
),
margin: EdgeInsets.only(top: 10.0),
alignment: Alignment(0.0, 0.0),
),
new Container(
child: new Text(name),
margin: EdgeInsets.only(top: 10.0),
),
new Container(
child: new Divider(
height: 2.0,
color: primarycolor,
),
margin: EdgeInsets.only(right: 10.0, left: 10.0, top: 10.0),
),
new Container(
child: new Text(
'Birth Date',
style: new TextStyle(
fontWeight: FontWeight.bold, fontSize: 16.0),
),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Text(birth),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Divider(
height: 2.0,
color: primarycolor,
),
margin: EdgeInsets.only(right: 10.0, left: 10.0, top: 10.0),
),
new Container(
child: new Text(
'Customer ID',
style: new TextStyle(
fontWeight: FontWeight.bold, fontSize: 16.0),
),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Text(c_id),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Divider(
height: 2.0,
color: primarycolor,
),
margin: EdgeInsets.only(right: 10.0, left: 10.0, top: 10.0),
),
new Container(
child: new Text(
'Email',
style: new TextStyle(
fontWeight: FontWeight.bold, fontSize: 16.0),
),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Text(email),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Divider(
height: 2.0,
color: primarycolor,
),
margin: EdgeInsets.only(right: 10.0, left: 10.0, top: 10.0),
),
new Container(
child: new Text(
'Mobile number',
style: new TextStyle(
fontWeight: FontWeight.bold, fontSize: 16.0),
),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Text(mobile_number),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new RaisedButton(
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new HomeScreen()));
},
color: secondarycolor,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)),
child: new Text('Update Profile',
style: new TextStyle(color: Colors.white)),
),
width: 300.0,
height: 40.0,
margin: EdgeInsets.only(top: 10.0),
)
],
);
}),
),
);
}
#override
void initState() {
super.initState();
profilejson();
}
}
void profilejson() async {
SharedPreferences pref = await SharedPreferences.getInstance();
var profile_url = url + "view_profile&userid=" + pref.getString('userid');
print(profile_url);
http.Response profileresponse = await http.get(profile_url);
var profile_response_json = json.decode(profileresponse.body);
name = profile_response_json['username'];
userimage = profile_response_json['image'];
birth = profile_response_json['dob'];
c_id = profile_response_json['customerid'];
email = profile_response_json['email'];
mobile_number = profile_response_json['phone'];
}

Answer 1

You can accomplish that with a StatefulWidget and setState to make the layout change on the go. As you already have the widget in your code you should simply call setState were you set your variables. Also the profilejson() should we within the state:
...
profilejson() async {
SharedPreferences pref = await SharedPreferences.getInstance();
var profile_url = url + "view_profile&userid=" + pref.getString('userid');
print(profile_url);
http.Response profileresponse = await http.get(profile_url);
var profile_response_json = json.decode(profileresponse.body);
// the variables you want the layout to be updated with
setState(() {
name = profile_response_json['username'];
userimage = profile_response_json['image'];
birth = profile_response_json['dob'];
c_id = profile_response_json['customerid'];
email = profile_response_json['email'];
mobile_number = profile_response_json['phone'];
})
}
#override
void initState() {
super.initState();
profilejson();
}
...
Full code:
String name, userimage, birth, c_id, email, mobile_number;
class Profile extends StatefulWidget {
#override
State<StatefulWidget> createState() {
Profile_Customer profile_customer() => Profile_Customer();
return profile_customer();
}
}
class Profile_Customer extends State<Profile> {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Profile'),
backgroundColor: primarycolor,
leading: new IconButton(
icon: new Icon(Icons.arrow_back),
onPressed: () {
Navigator.pushReplacement(
context,
new MaterialPageRoute(
builder: (context) => new HomeScreen()));
}),
),
body: email != null ? new Builder(builder: (BuildContext context) {
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
child: new Image.asset('assets/rural_post_logo.png',
fit: BoxFit.cover),
margin: EdgeInsets.only(bottom: 15.0),
),
new Container(
child: new CircleAvatar(
child: new Image.network(userimage,
width: 100.0, height: 100.0, fit: BoxFit.cover),
),
margin: EdgeInsets.only(top: 10.0),
alignment: Alignment(0.0, 0.0),
),
new Container(
child: new Text(name),
margin: EdgeInsets.only(top: 10.0),
),
new Container(
child: new Divider(
height: 2.0,
color: primarycolor,
),
margin: EdgeInsets.only(right: 10.0, left: 10.0, top: 10.0),
),
new Container(
child: new Text(
'Birth Date',
style: new TextStyle(
fontWeight: FontWeight.bold, fontSize: 16.0),
),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Text(birth),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Divider(
height: 2.0,
color: primarycolor,
),
margin: EdgeInsets.only(right: 10.0, left: 10.0, top: 10.0),
),
new Container(
child: new Text(
'Customer ID',
style: new TextStyle(
fontWeight: FontWeight.bold, fontSize: 16.0),
),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Text(c_id),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Divider(
height: 2.0,
color: primarycolor,
),
margin: EdgeInsets.only(right: 10.0, left: 10.0, top: 10.0),
),
new Container(
child: new Text(
'Email',
style: new TextStyle(
fontWeight: FontWeight.bold, fontSize: 16.0),
),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Text(email),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Divider(
height: 2.0,
color: primarycolor,
),
margin: EdgeInsets.only(right: 10.0, left: 10.0, top: 10.0),
),
new Container(
child: new Text(
'Mobile number',
style: new TextStyle(
fontWeight: FontWeight.bold, fontSize: 16.0),
),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new Text(mobile_number),
alignment: Alignment(-1.0, 0.0),
margin: EdgeInsets.only(top: 10.0, left: 10.0),
),
new Container(
child: new RaisedButton(
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new HomeScreen()));
},
color: secondarycolor,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)),
child: new Text('Update Profile',
style: new TextStyle(color: Colors.white)),
),
width: 300.0,
height: 40.0,
margin: EdgeInsets.only(top: 10.0),
)
],
);
}) : new Center(child: new CircularProgressIndicator()),
),
);
}
profilejson() async {
SharedPreferences pref = await SharedPreferences.getInstance();
var profile_url = url + "view_profile&userid=" + pref.getString('userid');
print(profile_url);
http.Response profileresponse = await http.get(profile_url);
var profile_response_json = json.decode(profileresponse.body);
// the variables you want the layout to be updated with
setState(() {
name = profile_response_json['username'];
userimage = profile_response_json['image'];
birth = profile_response_json['dob'];
c_id = profile_response_json['customerid'];
email = profile_response_json['email'];
mobile_number = profile_response_json['phone'];
})
}
#override
void initState() {
super.initState();
profilejson();
}
}