Fatal编程技术网
  • flutter/
  • Flutter setState未更新UI

Flutter setState未更新UI

flutter dart

Flutter setState未更新UI,flutter,dart,flutter-layout,Flutter,Dart,Flutter Layout,我正在尝试从API获取数据，我能够获取日志，但setState不起作用。 总的来说，我想要实现的是，如果在屏幕上显示数据时有响应，如果API或服务器上有任何错误，或者我想在snackbar中显示的任何其他内容。我的moto也会显示错误 下面是我的模型课 导入“http.dart”； 类用户{ int用户标识； int-id； 字符串标题； 弦体； 用户（{this.userId，this.id，this.title，this.body}）； User.fromJson（映射json）{ user

我正在尝试从API获取数据，我能够获取日志，但setState不起作用。 总的来说，我想要实现的是，如果在屏幕上显示数据时有响应，如果API或服务器上有任何错误，或者我想在snackbar中显示的任何其他内容。我的moto也会显示错误

下面是我的模型课

导入“http.dart”；
类用户{
int用户标识；
int-id；
字符串标题；
弦体；
用户（{this.userId，this.id，this.title，this.body}）；
User.fromJson（映射json）{
userId=json['userId']；
id=json['id']；
title=json['title']；
body=json['body']；
}
映射到JSON（）{
最终地图数据=新地图（）；
数据['userId']=this.userId；
数据['id']=this.id；
数据['title']=this.title；
数据['body']=this.body；
返回数据；
}
}
类UserExt{
静态getUserInfo（函数（用户）成功，函数（字符串ErrorMessage）错误）异步{
最终响应=等待HTTP.get（api:https://jsonplaceholder.typicode.com/posts/1");
if（response.issucess==true）{
成功（User.fromJson（response.response））；
}否则{
错误（response.response）；
}
}
}
下面是我的http.dart文件

导入'dart:html'；
进口“包装：颤振/cupertino.dart”；
将“package:http/http.dart”导入为http；
导入“dart:convert”作为convert；
导入“包：http/http.dart”；
常数超时持续时间=持续时间（秒：5）；
类HTTP{
静态未来获取（{@required String api}）异步{
试一试{
Response-Response=wait-http.get（api）.timeout（\u-timeoutDuration）；
返回_modeledResponse（响应）；
}捕获（错误）{
返回HttpResponse（issucess:false，response:error.toString（））；
}
}
静态未来建模响应（响应-响应）异步{
试一试{
if（response.statusCode==HttpStatus.ok）{
var jsonResponse=convert.jsonDecode（response.body）；
返回HttpResponse（issucess:true，response:jsonResponse）；
}否则{
返回HttpResponse（issucess:false，response:response.statusCode.toString（））；
}
}捕获（错误）{
返回HttpResponse（issucess:false，response:error.toString（））；
}
}
}
类HttpResponse{
最终bool发布成功；
最终动力响应；
HttpResponse（{@required this.issucess，@required this.response}）；
}
下面是我调用API的屏幕

导入'dart:io'；
进口“包装：颤振/材料.省道”；
导入“包：http_请求/User.dart”；
导入“http.dart”；
类ApiCalling扩展了StatefulWidget{
@凌驾
_ApiCallingState createState（）=>U ApiCallingState（）；
}
类_ApiCallingState扩展状态{
bool showLoader=false；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：中(
子：堆栈(
儿童：[
居中(
孩子：升起按钮(
子：文本（“调用API”），
已按下：（）{
设置状态（）{
showLoader=true；
});
UserExt.getUserInfo（（用户）{
打印（“UUUser id=${user.userId}”）；
showSnackBar（SnackBar（内容：Text（${user.userId}））；
设置状态（）{
showLoader=false；
});
}，（错误）{
showSnackBar（SnackBar（内容：Text（${error}））；
设置状态（）{
showLoader=false；
});
});
},
),
),
可见性（子项：CircularProgressIndicator（背景颜色：Colors.pink，），可见项：showLoader，），
],
),
),
);
}
}
在当前代码中，指示器未显示/隐藏，或snackbar也未显示

声明一个全局密钥 最终_scaffoldKey=GlobalKey（）

和在UI中
_scaffoldKey.currentState.showSnackBar（snackbar）

刚刚做了一些更改，加载项只需检查以下代码：

import 'package:flutter/material.dart';
import 'package:sample_project_for_api/model.dart';

void main() => runApp(ApiCalling());

class ApiCalling extends StatefulWidget {
  @override
  _ApiCallingState createState() => _ApiCallingState();
}

class _ApiCallingState extends State<ApiCalling> {
  bool showLoader = false;
  final _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        key: _scaffoldKey,
        body: Center(
          child: Stack(
            children: <Widget>[
              Builder(
                builder: (context) {
                  return Column(
                    children: <Widget>[
                      RaisedButton(
                        child: Text(
                            "this is first api call under the builder widget"),
                        onPressed: () {
                          UserExt.getUserInfo((user) {
                            print("UUUser id = ${user.userId}");
                            Scaffold.of(context).showSnackBar(SnackBar(
                              backgroundColor: Colors.redAccent,
                              content:
                                  Text("This is you user id ${user.userId}"),
                            ));
                          }, (error) {
                            Scaffold.of(context).showSnackBar(SnackBar(
                              duration: Duration(seconds: 2),
                              backgroundColor: Colors.redAccent,
                              content: Text("${error.toString()}"),
                            ));
                          });
                        },
                      ),
                      RaisedButton(
                        child: Text(
                            "this is second api call under the builder widget"),
                        onPressed: () {
                          UserExt.getUserInfo((user) {
                            print("UUUser id = ${user.userId}");
                            Scaffold.of(context).showSnackBar(SnackBar(
                              backgroundColor: Colors.redAccent,
                              content:
                                  Text("This is you user id ${user.userId}"),
                            ));
                          }, (error) {
                            Scaffold.of(context).showSnackBar(SnackBar(
                              duration: Duration(seconds: 2),
                              backgroundColor: Colors.redAccent,
                              content: Text("${error.toString()}"),
                            ));
                          });
                        },
                      )
                    ],
                  );
                },
              ),
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    RaisedButton(
                      child: Text("call snacker using the global key"),
                      onPressed: () {
                        setState(() {
                          showLoader = true;
                        });
                        UserExt.getUserInfo((user) {
                          print("UUUser id = ${user.userId}");
                          _scaffoldKey.currentState.showSnackBar(new SnackBar(
                              duration: Duration(seconds: 2),
                              content: new Text(
                                  "This is you user id :${user.userId}")));

                          setState(() {
                            showLoader = false;
                          });
                        }, (error) {
                          _scaffoldKey.currentState.showSnackBar(new SnackBar(
                              duration: Duration(seconds: 2),
                              content: new Text("${error.toString()}")));

                          setState(() {
                            showLoader = false;
                          });
                        });
                      },
                    ),
                    Secondbutton(),
                  ],
                ),
              ),
              Visibility(
                child: CircularProgressIndicator(
                  backgroundColor: Colors.pink,
                ),
                visible: showLoader,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Secondbutton extends StatefulWidget {
  @override
  _SecondbuttonState createState() => _SecondbuttonState();
}

class _SecondbuttonState extends State<Secondbutton> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("calling snacker without using the global key"),
      onPressed: () {
        UserExt.getUserInfo((user) {
          print("UUUser id = ${user.userId}");
          Scaffold.of(context).showSnackBar(SnackBar(
            backgroundColor: Colors.redAccent,
            content: Text("This is you user id ${user.userId}"),
          ));
        }, (error) {
          Scaffold.of(context).showSnackBar(SnackBar(
            duration: Duration(seconds: 2),
            backgroundColor: Colors.redAccent,
            content: Text("${error.toString()}"),
          ));
        });
      },
    );
  }
}



导入“包装：颤振/材料.省道”；
导入“package:sample_project_for_api/model.dart”；
void main（）=>runApp（ApiCalling（））；
类ApiCalling扩展了StatefulWidget{
@凌驾
_ApiCallingState createState（）=>U ApiCallingState（）；
}
类_ApiCallingState扩展状态{
bool showLoader=false；
最终_scaffoldKey=GlobalKey（）；
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
钥匙：_scaffoldKey，
正文：中(
子：堆栈(
儿童：[
建筑商(
生成器：（上下文）{
返回列(
儿童：[
升起的按钮(
子：文本(
“这是builder小部件下的第一个api调用”），
已按下：（）{
UserExt.getUserInfo（（用户）{
打印（“UUUser id=${user.userId}”）；
Scaffold.of（上下文）.showSnackBar（SnackBar(
背景颜色：Colors.redAccent，
内容：
Text（“这是您的用户id${user.userId}”），
));
}，（错误）{
Scaffold.of（上下文）.showSnackBar（SnackBar(
持续时间：持续时间（秒数：2），
背景颜色：Colors.redAccent，
内容：文本（${error.toString（）}），
));
});
},
),
升起的按钮(
子：文本(
“这是builder小部件下的第二个api调用”），
已按下：（）{
UserExt.getUserInfo（（用户）{

import 'dart:html';
import 'package:flutter/cupertino.dart';
import 'package:http/http.dart' as http;
import 'dart:convert' as convert;
import 'package:http/http.dart';

const _timeoutDuration = Duration(seconds: 5);

class HTTP {


  static Future<HttpResponse> get({@required String api}) async {

    try {
      Response response = await http.get(api).timeout(_timeoutDuration);
      return _modeledResponse(response);
    } catch (error) {
      return HttpResponse(isSuccess: false, response: error.toString());
    }


  }

  static Future<HttpResponse> _modeledResponse(Response response) async {

    try {
      if(response.statusCode == HttpStatus.ok) {
        var jsonResponse = convert.jsonDecode(response.body);
        return HttpResponse(isSuccess: true, response: jsonResponse);
      } else {
        return HttpResponse(isSuccess: false, response: response.statusCode.toString());
      }
    } catch (error) {
      return HttpResponse(isSuccess: false, response: error.toString());
    }

  }



}




class HttpResponse {
  final bool isSuccess;
  final dynamic response;
  HttpResponse({@required this.isSuccess, @required this.response});
}



import 'dart:io';
import 'package:flutter/material.dart';
import 'package:http_request/User.dart';
import 'http.dart';






class ApiCalling extends StatefulWidget {
  @override
  _ApiCallingState createState() => _ApiCallingState();
}

class _ApiCallingState extends State<ApiCalling> {

  bool showLoader = false;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: Stack(
          children: <Widget>[


            Center(
              child: RaisedButton(
                child: Text("Call API"),
                onPressed: () {

                  setState(() {
                    showLoader = true;
                  });
                  UserExt.getUserInfo((user){
                    print("UUUser id = ${user.userId}");
                    Scaffold.of(context).showSnackBar(SnackBar(content:     Text("${user.userId}"),));

                setState(() {
                  showLoader = false;
                });


              }, (error){
                Scaffold.of(context).showSnackBar(SnackBar(content: Text("${error}"),));
                setState(() {
                  showLoader = false;
                });
              });


            },
          ),
        ),
        Visibility(child: CircularProgressIndicator(backgroundColor: Colors.pink,), visible: showLoader,),


      ],
    ),
  ),
);
  }
}



import 'package:flutter/material.dart';
import 'package:sample_project_for_api/model.dart';

void main() => runApp(ApiCalling());

class ApiCalling extends StatefulWidget {
  @override
  _ApiCallingState createState() => _ApiCallingState();
}

class _ApiCallingState extends State<ApiCalling> {
  bool showLoader = false;
  final _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        key: _scaffoldKey,
        body: Center(
          child: Stack(
            children: <Widget>[
              Builder(
                builder: (context) {
                  return Column(
                    children: <Widget>[
                      RaisedButton(
                        child: Text(
                            "this is first api call under the builder widget"),
                        onPressed: () {
                          UserExt.getUserInfo((user) {
                            print("UUUser id = ${user.userId}");
                            Scaffold.of(context).showSnackBar(SnackBar(
                              backgroundColor: Colors.redAccent,
                              content:
                                  Text("This is you user id ${user.userId}"),
                            ));
                          }, (error) {
                            Scaffold.of(context).showSnackBar(SnackBar(
                              duration: Duration(seconds: 2),
                              backgroundColor: Colors.redAccent,
                              content: Text("${error.toString()}"),
                            ));
                          });
                        },
                      ),
                      RaisedButton(
                        child: Text(
                            "this is second api call under the builder widget"),
                        onPressed: () {
                          UserExt.getUserInfo((user) {
                            print("UUUser id = ${user.userId}");
                            Scaffold.of(context).showSnackBar(SnackBar(
                              backgroundColor: Colors.redAccent,
                              content:
                                  Text("This is you user id ${user.userId}"),
                            ));
                          }, (error) {
                            Scaffold.of(context).showSnackBar(SnackBar(
                              duration: Duration(seconds: 2),
                              backgroundColor: Colors.redAccent,
                              content: Text("${error.toString()}"),
                            ));
                          });
                        },
                      )
                    ],
                  );
                },
              ),
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    RaisedButton(
                      child: Text("call snacker using the global key"),
                      onPressed: () {
                        setState(() {
                          showLoader = true;
                        });
                        UserExt.getUserInfo((user) {
                          print("UUUser id = ${user.userId}");
                          _scaffoldKey.currentState.showSnackBar(new SnackBar(
                              duration: Duration(seconds: 2),
                              content: new Text(
                                  "This is you user id :${user.userId}")));

                          setState(() {
                            showLoader = false;
                          });
                        }, (error) {
                          _scaffoldKey.currentState.showSnackBar(new SnackBar(
                              duration: Duration(seconds: 2),
                              content: new Text("${error.toString()}")));

                          setState(() {
                            showLoader = false;
                          });
                        });
                      },
                    ),
                    Secondbutton(),
                  ],
                ),
              ),
              Visibility(
                child: CircularProgressIndicator(
                  backgroundColor: Colors.pink,
                ),
                visible: showLoader,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Secondbutton extends StatefulWidget {
  @override
  _SecondbuttonState createState() => _SecondbuttonState();
}

class _SecondbuttonState extends State<Secondbutton> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("calling snacker without using the global key"),
      onPressed: () {
        UserExt.getUserInfo((user) {
          print("UUUser id = ${user.userId}");
          Scaffold.of(context).showSnackBar(SnackBar(
            backgroundColor: Colors.redAccent,
            content: Text("This is you user id ${user.userId}"),
          ));
        }, (error) {
          Scaffold.of(context).showSnackBar(SnackBar(
            duration: Duration(seconds: 2),
            backgroundColor: Colors.redAccent,
            content: Text("${error.toString()}"),
          ));
        });
      },
    );
  }
}





class _ApiCallingState extends State<ApiCalling> {
  bool showLoader = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(
        builder: (context)=>
            Center(
        child: Stack(
          children: <Widget>[
            Center(
              child: RaisedButton(
                child: Text("Call API"),
                onPressed: () {
                  setState(() {
                    showLoader = true;
                  });
                  UserExt.getUserInfo((user) {
                    print("UUUser id = ${user.userId}");
                    print("context==$context");
                    Scaffold.of(context).showSnackBar(SnackBar(
                      content: Text(" User Id${user.userId}"),
                    ));
                     setState(() {
                      showLoader = false;

                    });



                  }, (error) {
                    setState(() {
                      showLoader = false;
                    });
                    Scaffold.of(context).showSnackBar(SnackBar(
                      content: Text("${error}"),
                    ));

                  });
                },
              ),
            ),
            Visibility(
              child:
              Center(
                child:CircularProgressIndicator(
                  backgroundColor: Colors.pink,
                ),

              ),
              visible: showLoader,
            )
          ],
        ),
      ),
      )

    );
  }
}