Как показать заставку на LoadStart?

Я делаю свое первое приложение Flutter, и у меня есть вопрос. Я использую плагин flutter_inappwebview и хочу показать полноэкранную заставку/экран загрузки. Желательно с анимацией Лотти. Код, который у меня есть до сих пор:

 Widget build(BuildContext context) {
   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
   return Scaffold(
       body: Container(
           child: Column(children: <Widget>[
             Expanded(
               child: Stack(
                 children: [
                   InAppWebView(
                     key: webViewKey,
                     initialUrlRequest:
                     URLRequest(url: Uri.parse("https://www.google.com")),
                     initialUserScripts: UnmodifiableListView<UserScript>([]),
                     initialOptions: options,
                     pullToRefreshController: pullToRefreshController,
                     onWebViewCreated: (controller) {
                       webViewController = controller;
                     },
                     onLoadStart: (controller, url) async {
                       setState(() {
                         this.url = url.toString();
                         urlController.text = this.url;
                       });
                     },
                     androidOnPermissionRequest:
                         (controller, origin, resources) async {
                       return PermissionRequestResponse(
                           resources: resources,
                           action: PermissionRequestResponseAction.GRANT);
                     },
                     shouldOverrideUrlLoading:
                         (controller, navigationAction) async {
                       var uri = navigationAction.request.url!;

                       if (![
                         "http",
                         "https",
                         "file",
                         "chrome",
                         "data",
                         "javascript",
                         "about"
                       ].contains(uri.scheme)) {
                         if (await canLaunch(url)) {
                           // Launch the App
                           await launch(
                             url,
                           );
                           // and cancel the request
                           return NavigationActionPolicy.CANCEL;
                         }
                       }

                       return NavigationActionPolicy.ALLOW;
                     },
                     onLoadStop: (controller, url) async {
                     
                     },

                     onLoadError: (controller, url, code, message) {
                       pullToRefreshController.endRefreshing();
                     },
                     onProgressChanged: (controller, progress) {
                       if (progress == 100) {
                         pullToRefreshController.endRefreshing();
                       }
                       setState(() {
                         this.progress = progress / 100;
                         urlController.text = this.url;
                       });
                     },
                     onUpdateVisitedHistory: (controller, url, androidIsReload) {
                       setState(() {
                         this.url = url.toString();
                         urlController.text = this.url;
                       });
                     },
                     onConsoleMessage: (controller, consoleMessage) {
                       print(consoleMessage);
                     },
                   ),
                 ],
               ),
             ),

           ])));
 }
}

Я новичок во Flutter, поэтому, если у вас есть решение, сделайте его простым. Заранее спасибо!

flutter webview

11.05.2022 16:37

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Параметр onLoadStart позволяет узнать, когда начинается загрузка, поэтому вы никогда не сможете разместить там заставку, ваш второй вариант — использовать метод isLoading, который исходит из webviewController, он возвращает true or false, когда страница полностью загружается и когда загружается.

Таким образом, вы можете использовать это и настроить заставку, а затем показать заставку, когда она есть true, и убрать ее, когда она есть false.

   bool _isLoading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:
            Container(
                child: _isLoading
                    ? Center(
                        child: SpinKitChasingDots(
                        size: 50,
                        color: Colors.black,
                      ))
                    : Column(children: <Widget>[
                        Expanded(
                          child: Stack(
                            children: [
                              InAppWebView(
                                 key: webViewKey,
                                initialUrlRequest: URLRequest(
                                    url: Uri.parse("https://www.google.com")),
                                initialUserScripts:
                                    UnmodifiableListView<UserScript>([]),
                                 initialOptions: options,
                                pullToRefreshController:
                                    pullToRefreshController,
                                onWebViewCreated: (controller) {
                                
                                  webViewController = controller;
                                 
                                },
                                onLoadStart: (controller, url) async {
                                  setState(() {
                                    _isLoading = true;
                                  });
                                },
                                androidOnPermissionRequest:
                                    (controller, origin, resources) async {
                                  return PermissionRequestResponse(
                                      resources: resources,
                                      action: PermissionRequestResponseAction
                                          .GRANT);
                                },
                                shouldOverrideUrlLoading:
                                    (controller, navigationAction) async {
                                  var uri = navigationAction.request.url!;

                                  if (![
                                    "http",
                                    "https",
                                    "file",
                                    "chrome",
                                    "data",
                                    "javascript",
                                    "about"
                                  ].contains(uri.scheme)) {
                                    if (await canLaunch(url)) {
                                      // Launch the App
                                      await launch(
                                        url,
                                      );
                                      // and cancel the request
                                      return NavigationActionPolicy.CANCEL;
                                    }
                                  }

                                  return NavigationActionPolicy.ALLOW;
                                },
                                onLoadStop: (controller, url) async {
                                  print("We are no longer loading");
                                  setState(() {
                                    _isLoading = false;
                                  });
                                },

                                onLoadError: (controller, url, code, message) {
                                   pullToRefreshController.endRefreshing();
                                },
                                onProgressChanged: (controller, progress) async{
                                  setState(() {
                                    _isLoading = false;
                                  });
                                  SpinKitChasingDots();
                                   if (progress == 100) {
                                     pullToRefreshController.endRefreshing();
                                   }
                                   setState(() {
                                     this.progress = progress / 100;
                                     urlController.text = this.url;
                                   });
                                },
                                onUpdateVisitedHistory:
                                    (controller, url, androidIsReload) {
                                  setState(() {
                                    this.url = url.toString();
                                    //  urlController.text = this.url;
                                  });
                                },
                                onConsoleMessage: (controller, consoleMessage) {
                                  print(consoleMessage);
                                },
                              ),
                            ],
                          ),
                        ),
                      ])));
  }

В этом примере я вручную устанавливаю _isLoading на true и false.

Это потому, что я понял, что вы мало что можете сделать с контроллером, если контроллер не собран, вот пример, если вы запустите его, вы заметите, что застряли на заставке.

bool _isLoading = false;
  @override
  Widget build(BuildContext context) {
return Scaffold(
    body:
        Container(
            child: _isLoading
                ? Center(
                    child: SpinKitChasingDots(
                    size: 50,
                    color: Colors.black,
                  ))
                : Column(children: <Widget>[
                    Expanded(
                      child: Stack(
                        children: [
                          InAppWebView(
                            //  key: webViewKey,
                            initialUrlRequest: URLRequest(
                                url: Uri.parse("https://www.google.com")),
                            initialUserScripts:
                                UnmodifiableListView<UserScript>([]),
                            //  initialOptions: options,
                            pullToRefreshController:
                                pullToRefreshController,
                            onWebViewCreated: (controller) {
                              webViewController = controller;
                            },

                            onLoadStart: (controller, url) async {
                              setState(() {
                                _isLoading = true;
                              });

                              //  setState(() {
                              //    this.url = url.toString();
                              //    urlController.text = this.url;
                              //  });
                            },
                            androidOnPermissionRequest:
                                (controller, origin, resources) async {
                              return PermissionRequestResponse(
                                  resources: resources,
                                  action: PermissionRequestResponseAction
                                      .GRANT);
                            },
                            shouldOverrideUrlLoading:
                                (controller, navigationAction) async {
                              var uri = navigationAction.request.url!;

                              if (![
                                "http",
                                "https",
                                "file",
                                "chrome",
                                "data",
                                "javascript",
                                "about"
                              ].contains(uri.scheme)) {
                                if (await canLaunch(url)) {
                                  // Launch the App
                                  await launch(
                                    url,
                                  );
                                  // and cancel the request
                                  return NavigationActionPolicy.CANCEL;
                                }
                              }

                              return NavigationActionPolicy.ALLOW;
                            },
                            onLoadStop: (controller, url) async {
                              

                              _isLoading = await controller.isLoading();
                              
                             
                            },

                            onLoadError: (controller, url, code, message) {
                              //  pullToRefreshController.endRefreshing();
                            },
                            onProgressChanged: (controller, progress) async{
                              print("Gozimasu");
                              // bool loading = await controller.isLoading();
                              // setState(() {
                                _isLoading = await controller.isLoading();
                              // });
                              // SpinKitChasingDots();
                              //  if (progress == 100) {
                              //    pullToRefreshController.endRefreshing();
                              //  }
                              //  setState(() {
                              //    this.progress = progress / 100;
                              //    urlController.text = this.url;
                              //  });
                            },
                            onUpdateVisitedHistory:
                                (controller, url, androidIsReload) {
                              setState(() {
                                this.url = url.toString();
                                //  urlController.text = this.url;
                              });
                            },
                            onConsoleMessage: (controller, consoleMessage) {
                              print(consoleMessage);
                            },
                          ),
                        ],
                      ),
                    ),
                  ])));

}

Привет! Спасибо за ответ. Это сработало для меня! Спасибо за помощь мне. Можно ли сделать затухание анимации загрузки?

— 12.05.2022 19:07

Вы тоже можете сделать это, вам просто нужно сначала создать виджет

— 12.05.2022 19:39

12.05.2022 03:52