flutter - 在 Flutter 中完成 CircularProgressIndicator 后如何导航到另一个页面?
问题描述
您好,我是 Flutter 的新手,目前正在构建一个聊天应用程序。
我有一个配置文件制作器屏幕,用户可以在其中上传图像来设置他们的头像。我CircularProgressIndicator()
用来显示上传屏幕。我想知道如何在上传完成后自动导航到下一个屏幕,即我的主屏幕,这样用户就不必等待任何按钮按下。
这是我尝试过的代码
progressString != '100% Completed' ? Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(
backgroundColor: Colors.blue,
),
SizedBox(
height: 20.0,
),
Text("Uploading File : $progressString",
style: TextStyle(
color: Colors.white54,
fontSize: 20.0,
fontWeight: FontWeight.w900,
),
),
],
) : Navigator.pushReplacement(context,
MaterialPageRoute(builder: (context) {
return LoginPage();
}),
),
上传代码
FormData data = FormData.fromMap({
"username": userName.toString(),
"name": naMe.toString(),
"birthday": birthDay.toString(),
"about": aboutUser.toString(),
"sender": sendUser.toString(),
"mobile": userMobile.toString(),
"avatar": _image != null
? await MultipartFile.fromFile(_image.path,
filename: avatarName.toString())
: Text('Invalid Avatar'),
});
if (_validateAndSave()) {
final token = widget.token;
try {
Dio dio = Dio();
dio.options.headers['Accept'] = "application/json";
dio.options.headers['Authorization'] = "Bearer $token";
dio.options.headers['Content-Type'] = "multipart/form-data";
dio.options.followRedirects = false;
var response = await dio.post(url,
data: data, onSendProgress: (int rec, int total) {
setState(() {
uploading = true;
progressString = ((rec / total * 100).toString());
});
});
var responseCode = response.statusCode;
print('Dio responseCode : $responseCode');
} on DioError catch (err) {
var responseCode = err.response.statusCode;
print(responseCode);
}
setState(() {
uploading = false;
progressString = "100% Completed ";
print(progressString);
});
}
解决方案
上传完成后,您应该在上传功能中设置导航器
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(
backgroundColor: Colors.blue,
),
SizedBox(
height: 20.0,
),
Text("Uploading File : $progressString",
style: TextStyle(
color: Colors.white54,
fontSize: 20.0,
fontWeight: FontWeight.w900,
),
),
],
),
FormData data = FormData.fromMap({
"username": userName.toString(),
"name": naMe.toString(),
"birthday": birthDay.toString(),
"about": aboutUser.toString(),
"sender": sendUser.toString(),
"mobile": userMobile.toString(),
"avatar": _image != null
? await MultipartFile.fromFile(_image.path,
filename: avatarName.toString())
: Text('Invalid Avatar'),
});
if (_validateAndSave()) {
final token = widget.token;
try {
Dio dio = Dio();
dio.options.headers['Accept'] = "application/json";
dio.options.headers['Authorization'] = "Bearer $token";
dio.options.headers['Content-Type'] = "multipart/form-data";
dio.options.followRedirects = false;
var response = await dio.post(url,
data: data, onSendProgress: (int rec, int total) {
setState(() {
uploading = true;
progressString = ((rec / total * 100).toString());
});
});
var responseCode = response.statusCode;
print('Dio responseCode : $responseCode');
} on DioError catch (err) {
var responseCode = err.response.statusCode;
print(responseCode);
}
Future.delaye(Duration(milliseconds: 100), (){
Navigator.pushReplacement(this.context,
MaterialPageRoute(builder: (context) {
return LoginPage();
}),
);
});
}
推荐阅读
- java - 为什么一个用于 MD5 哈希计算的函数对于较小的文件更可取,而对于大文件却效率低下?
- android - 从android studio的布局文件中的字符串数组访问字符串
- angular - 在您的文件夹结构中放置角度服务的最佳位置在哪里?
- python-3.x - Python 索引超出范围列表异常处理
- swift - 以编程方式更改命令行应用程序图标
- reactjs - React Native - 未安装的组件
- microsoft-graph-api - Microsoft Graph API:有没有办法获取用户的团队活动源?
- c# - 在 linq Select 子句中具有两个输入参数的 Lambda 函数
- python - 使用 strip() 函数的 For 循环列表理解
- matplotlib - 创建极坐标直方图网格(python)