Блог

Главная - Вопросы по программированию - flutter: как показать анимацию загрузки перед входом в систему?

flutter: как показать анимацию загрузки перед входом в систему?

#flutter #dart

#флаттер #дротик

Вопрос:

Я работаю с flutter. После того, как я ввожу свой идентификатор и пароль, я хочу показать log in animation перед входом на домашнюю страницу. Я использую dialog , но я чувствую, что мой код очень тупой и имеет потенциальные ошибки. Есть ли лучшее решение?

 // this part is for the input content is legal
else {
        showDialog(
            context: context,
            barrierDismissible: false,
            builder: (BuildContext context) {
              return LoadingStyle.buildWidget();  // this is a simple loading animation
            });
        service.createSession(context, code, id).then((response) { // log in part
          if (response != null) {
            this.saveUser(response);   // something about saving user info
          } else {
            print('null respose');
          }
        }).catchError((e) {
          if (e is GrpcError amp;amp; e.code == StatusCode.unauthenticated) {
            setState(() {
              this.errorMessage = "grpc network error";
            });
          }
        }).whenComplete(() {
          Navigator.of(context).pop();  // pop dialog here, is this right?
          MyRoutersl.goNewPage(context); // enter the new page
        });
      }

Ответ №1:

Я предлагаю использовать FutureBuilder. Существует также некоторый загрузочный виджет по умолчанию CircularProgressIndicator() , который можно использовать во время выполнения.

Поскольку вход в систему — это своего рода асинхронный процесс, вы можете использовать FutureBuilder, как показано ниже:

 FutureBuilder(
  future: service.createSession(...  // Use Async function to return the result
  builder: (context, snapshot) {
    if(snapshot.hasData amp;amp; snapshot.connectionState == done ){

      // return widget after login successfully
      // result should equal to snapshot.data

    } else {

      // return CircularProgressIndicator();

    }
  }
)

Если вам нужен более причудливый индикатор загрузки, вы можете проверить этот пакет flutter_spinkit

Комментарии:

1. спасибо за ваше решение. Но, в if частности, как перейти на новую страницу?

2. FutureBuilder Работает лучше ПОСЛЕ нажатия нового маршрута, когда данные еще не готовы. Вы все равно можете выполнить некоторую обработку, когда результат завершается неудачей (всплывающий маршрут), загрузка (показать индикатор) и успех (показать содержимое).

3. Если вы хотите выполнить будущую проверку данных ПЕРЕД запуском нового маршрута, использование виджета загрузки, который блокирует взаимодействие пользователя с экраном, кажется лучшим решением. (исходная из вашего кода или используйте некоторую логическую проверку, чтобы показать страницу загрузки).

Ответ №2:

Вы можете использовать библиотеки из pub.dev, такие как loading_overlay

или вы можете создать свой собственный загрузочный виджет, например :

 class OverlayWidget extends StatelessWidget {
  final Widget child;
  final bool isLoading;

  OverlayWidget({@required this.child, this.isLoading = false})
      : assert(child != null);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        Visibility(
          visible: isLoading,
          child: Container(
            color: Colors.grey.withOpacity(0.4),
            child: Center(
              child: Platform.isIOS
                  ? CupertinoActivityIndicator(
                      radius: 20,
                    )
                  : CircularProgressIndicator(),
            ),
          ),
        )
      ],
    );
  }
}

Ответ №3:

Пожалуйста, следуйте этому (modal_progress_hud)

 import 'package:modal_progress_hud/modal_progress_hud.dart';


......
bool _saving = false
....
@override
Widget build(BuildContext context) {
  return Scaffold(
     body: ModalProgressHUD(child: Container(
       Form(...)
     ), inAsyncCall: _saving),
  );
}