Как установить значение текста динамически из json в флаттере - PullRequest
Новая
       9

Как установить значение текста динамически из json в флаттере

0 голосов
/ 27 июня 2018

Привет, друзья, как установить текстовое значение динамически. Я использую JSON для получения данных, но когда я обновляю данные, они заполняются, и я вызываю JSON в initstate для загрузки до загрузки страницы приложения. не знаю много о флаттере, поэтому, пожалуйста, помогите мне с этим, пожалуйста, найдите код ниже 

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

1 Ответ

0 голосов
/ 27 июня 2018

Это можно сделать с помощью StatefulWidget и setState, чтобы изменить макет на ходу. Поскольку у вас уже есть виджет в вашем коде, вы должны просто вызвать setState, где вы устанавливали свои переменные. Также profilejson() мы должны в пределах штата: 

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

Полный код: 

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