Flutter登陆界面（含dio网络请求）

最新推荐文章于 2025-07-01 16:50:46 发布

原创最新推荐文章于 2025-07-01 16:50:46 发布 · 4.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #dio #dart #请求网络 #登陆页面

Flutter 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了Flutter登陆页面的网络请求逻辑。点击登陆后，页面先判断输入是否为空，不为空则将用户信息传给接口，接口返回判断字段。若登陆成功，跳转到主页并销毁之前页面，后续还会添加传值方法，完整代码可在码云仓库查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

点击登陆后先页面判断是否为空，不为空则将user和password传递给接口，由接口判断返回是否登陆成功的判断字段success。如果成功则跳转到主页，并销毁主页之前所有页面（即不能返回，点击物理返回键则退出程序）。还没写传给下个页面值的方法，后续会添加

loadDataByDio() async {
    try {
      print('登陆中');
      Response response;
      Dio dio = new Dio();
      response = await dio.get(
          "接口地址?LOGIN_NAME=$_user&PASSWORD=$_password");
      if (response.statusCode == 200) {
        _decodeTest(response.data);
      } else {
        _result = 'error code : ${response.statusCode}';
      }
    } catch (exception) {
      print('exc:$exception');
      _result = '网络异常';
    }

    setState(() {});
  }

  _decodeTest(var body) {
    bool usertxt = body['success'];
    String errMess = body['message'];
    if (usertxt == false) {
      _modalBottomSheetMenu(errMess);
    } else {
      Navigator.of(context).pushAndRemoveUntil(
          new MaterialPageRoute(builder: (context) => new NavBar()),
          (route) => route == null);
    }
  }

  _modalBottomSheetMenu(errMess) {
    showModalBottomSheet(
        context: context,
        builder: (builder) {
          return new Container(
            height: 50.0,
            child: new Container(
                decoration: new BoxDecoration(
                    color: Colors.grey,
                ),
                child: new Center(
                  child: new Text(errMess,style: TextStyle(color: Colors.white),),
                )),
          );
        });
  }