Метод 1: использование кругового индикатора прогресса

Один из самых простых способов добавить индикатор загрузки — использовать виджет CircularProgressIndicatorиз платформы Flutter. Вот пример того, как вы можете включить его в свой WebView:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewWithIndicator extends StatefulWidget {
  @override
  _WebViewWithIndicatorState createState() => _WebViewWithIndicatorState();
}
class _WebViewWithIndicatorState extends State<WebViewWithIndicator> {
  bool _isLoading = true;
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebView(
          initialUrl: 'https://example.com',
          onPageFinished: (url) {
            setState(() {
              _isLoading = false;
            });
          },
        ),
        if (_isLoading)
          Center(
            child: CircularProgressIndicator(),
          ),
      ],
    );
  }
}

В этом примере мы помещаем виджет WebView в стек. Мы используем логическую переменную _isLoading, чтобы отслеживать, загружается ли страница. Если да, мы отображаем CircularProgressIndicatorв центре экрана.

Метод 2. Настройка индикатора загрузки

Если вы предпочитаете более персонализированный индикатор загрузки, вы можете создать собственный виджет, соответствующий дизайну вашего приложения. Вот пример:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewWithCustomIndicator extends StatefulWidget {
  @override
  _WebViewWithCustomIndicatorState createState() =>
      _WebViewWithCustomIndicatorState();
}
class _WebViewWithCustomIndicatorState
    extends State<WebViewWithCustomIndicator> {
  bool _isLoading = true;
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebView(
          initialUrl: 'https://example.com',
          onPageFinished: (url) {
            setState(() {
              _isLoading = false;
            });
          },
        ),
        if (_isLoading)
          Center(
            child: Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Center(
                child: CircularProgressIndicator(),
              ),
            ),
          ),
      ],
    );
  }
}

В этом примере мы создаем собственный индикатор загрузки, обертывая CircularProgressIndicatorвиджетом Container. Containerпозволяет нам настроить размер, форму и внешний вид индикатора загрузки в соответствии с нашими предпочтениями.

Метод 3: использование пакета Flutter

Если вам нужны более продвинутые индикаторы загрузки, вы можете изучить пакеты Flutter, доступные в сообществе. Один из популярных пакетов называется «flutter_spinkit» и содержит коллекцию красивых анимаций загрузки. Вот пример того, как вы можете его использовать:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
class WebViewWithSpinnerIndicator extends StatefulWidget {
  @override
  _WebViewWithSpinnerIndicatorState createState() =>
      _WebViewWithSpinnerIndicatorState();
}
class _WebViewWithSpinnerIndicatorState
    extends State<WebViewWithSpinnerIndicator> {
  bool _isLoading = true;
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebView(
          initialUrl: 'https://example.com',
          onPageFinished: (url) {
            setState(() {
              _isLoading = false;
            });
          },
        ),
        if (_isLoading)
          Center(
            child: SpinKitFadingCircle(
              color: Colors.blue,
              size: 50.0,
            ),
          ),
      ],
    );
  }
}

В этом примере мы импортируем пакет «flutter_spinkit» и используем виджет SpinKitFadingCircleдля отображения анимации вращающегося круга в качестве индикатора загрузки. Вы можете настроить цвет, размер и стиль анимации в соответствии с эстетикой вашего приложения.

Добавление индикаторов загрузки в WebView Flutter имеет решающее значение для обеспечения бесперебойного взаимодействия с пользователем. В этой статье мы рассмотрели три метода реализации индикаторов загрузки: использование CircularProgressIndicator, создание собственного индикатора загрузки и использование пакетов Flutter, таких как «flutter_spinkit», для более сложных анимаций. Включив эти индикаторы загрузки, вы можете повысить удобство использования и визуальную привлекательность своих приложений Flutter на базе WebView, гарантируя, что пользователи будут знать о текущем процессе загрузки.