CircularProgressIndicator 在 Flutter 中完成后如何导航到另一个页面？

Question

您好，我是 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);
    });
  }

Answer 1

上传完成后，您应该在上传函数中设置导航器

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

Answer 2

上传完成后，更新UI向用户显示上传完成和添加post 导航到下一页的帧回调。

Answer 3

第 1 步：在 lib 文件夹下创建一个新文件，即 splashscreen.dart 文件。在 main.dart 文件中引用 SplashScreen()。

文件名：main.dart

import 'package:flutter/material.dart';
import 'package:mfitz/splashscreen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}

第 2 步：在 splashscreen.dart 文件下为初始屏幕创建所需的 UI，并在 void initState() 方法下包含以下代码，以便在 5 秒后导航到新屏幕。

Timer(Duration(seconds: 5), () {
              Navigator.of(context)
                  .pushReplacement(MaterialPageRoute(builder: (_) => MainScreen()));

初始屏幕代码

文件名：splashscreen.dart

    import 'dart:async';
    
    import 'package:flutter/material.dart';
    import 'package:google_fonts/google_fonts.dart';
    
    import 'mainScreen.dart';
    
    class SplashScreen extends StatefulWidget {
      @override
      _SplashScreenState createState() => _SplashScreenState();
    }
    
    class _SplashScreenState extends State<SplashScreen> {
      @override
      void initState() {
        super.initState();
//Navigates to new screen after 5 seconds.
        Timer(Duration(seconds: 5), () {
          Navigator.of(context)
              .pushReplacement(MaterialPageRoute(builder: (_) => MainScreen()));
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Stack(
            fit: StackFit.expand,
            children: [
              Container(
                constraints: BoxConstraints.expand(),
                decoration: BoxDecoration(
                  image: new DecorationImage(
                    image: AssetImage('assets/images/img2.jpg'),
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Expanded(
                    flex: 2,
                    child: Container(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          CircleAvatar(
                            backgroundColor: Colors.grey[100],
                            radius: 80.0,
                            child: Text(
                              "MOBIFIT.",
                              style: GoogleFonts.aldrich(
                                  fontWeight: FontWeight.bold,
                                  color: Colors.black,
                                  fontSize: 30.0),
                              textAlign: TextAlign.center,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                      flex: 1,
                      child: Column(
                        children: [
                          Padding(
                            padding: EdgeInsets.only(right: 100.0, left: 100.0),
                            child: LinearProgressIndicator(
                              backgroundColor: Colors.white,
                              valueColor:
                                  AlwaysStoppedAnimation<Color>(Colors.grey),
                              minHeight: 10.0,
                            ),
                          ),
                          Padding(padding: EdgeInsets.only(bottom: 10.0))
                        ],
                      ))
                ],
              )
            ],
          ),
        );
      }
    }

启动画面

主屏幕

CircularProgressIndicator 在 Flutter 中完成后如何导航到另一个页面？

How can I navigate to another page after CircularProgressIndicator completed in Flutter?

flutter

flutter-layout

flutter-animation

flutter-navigation

flutter-widget