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

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'];
}

This is not related to programming. It will just help you writing understandable *questions and answer* on **StackOverflow**: [When to use "the"? (definite article)](https://www.ef.edu/english-resources/english-grammar/definite-article/) — creativecreatorormaybenot, Jun 27 '18 at 12:27

Bostrot · Accepted Answer · 2018-06-28T07:04:51.640

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();
    }
}

You can include an if statement to see wether the json has been loaded or not. Wrap your widget under body in `email != null ? all_your_widgets_under_body : Center(child: CircularProgressbar())` — Bostrot, Jun 28 '18 at 06:06
can you please provide the complete code I haven't understood sorry for the trouble — ayub baba, Jun 28 '18 at 06:08
You just put `email != null ?` in front of `new Builder` and `: Center(child: CircularProgressbar())` after the widget Builder. — Bostrot, Jun 28 '18 at 06:11
body: email != null ? name != null ? userimage != null ? birth != null ? c_id != null ? c_id != null ? : Center( child: CircularProgressIndicator(), ) — ayub baba, Jun 28 '18 at 06:24
The logical operator is `&&` so something like `email != null && name != null` the `?` is like a `then`. And you mustn't the `:` which is like an `else`. — Bostrot, Jun 28 '18 at 06:28
not able to display the view only circular loader is loading — ayub baba, Jun 28 '18 at 06:58
The following assertion was thrown building Builder(dirty): 'package:flutter/src/painting/image_provider.dart': Failed assertion: line 405 pos 16: 'url != — ayub baba, Jun 28 '18 at 07:03
I added the full code above. (it only needs to check on one variable) — Bostrot, Jun 28 '18 at 07:05
Bro if possible help me with this as well https://stackoverflow.com/questions/51075166/trying-to-upload-the-image-to-server-in-the-flutter-using-dart?noredirect=1#comment89141917_51075166 sorry to trouble you — ayub baba, Jun 28 '18 at 07:19
Love u Bro its worked perfectly and thanks for explaining about the? and : — ayub baba, Jun 28 '18 at 07:30

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

1 Answers1