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

Метод 1: наложение с CircularProgressIndicator
Один из способов отображения индикатора загрузки — использование наложения с CircularProgressIndicator. Этот подход позволяет накладывать индикатор загрузки поверх содержимого WebView.

Stack(
  children: [
    WebView(...), // WebView widget
    if (isLoading)
      Container(
        color: Colors.white, // Background color
        child: Center(
          child: CircularProgressIndicator(),
        ),
      ),
  ],
)

Метод 2: позиционируется с помощью CircularProgressIndicator
Другой подход заключается в использовании виджета Positioned для позиционирования CircularProgressIndicator в определенном месте внутри WebView. Этот метод дает вам больше контроля над размещением индикатора загрузки.

Stack(
  children: [
    WebView(...), // WebView widget
    if (isLoading)
      Positioned(
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        child: Container(
          color: Colors.white, // Background color
          child: Center(
            child: CircularProgressIndicator(),
          ),
        ),
      ),
  ],
)

Метод 3: Пакет ModalProgressHUD
Пакет ModalProgressHUD предоставляет удобный способ отображения индикатора загрузки с настраиваемым цветом фона. Он отображает модальный индикатор выполнения, занимающий весь экран.

ModalProgressHUD(
  inAsyncCall: isLoading,
  color: Colors.white, // Background color
  progressIndicator: CircularProgressIndicator(),
  child: WebView(...), // WebView widget
)

Метод 4: пакет WebView_flutterplus
WebView_flutterplus — это пакет, расширяющий функциональность виджета WebView. Он предоставляет встроенный индикатор загрузки с настраиваемыми параметрами, включая цвет фона.

WebViewPlus(
  initialUrl: 'https://example.com',
  loadingIndicatorColor: Colors.white, // Background color
  loadingIndicatorWidget: CircularProgressIndicator(),
)

Метод 5: пользовательский виджет WebView
Если вы предпочитаете более индивидуальное решение, вы можете создать собственный виджет WebView, который инкапсулирует логику WebView и индикатора загрузки. Такой подход дает вам полный контроль над внешним видом и поведением индикатора загрузки.

class CustomWebView extends StatefulWidget {
  // Constructor and other properties
  @override
  _CustomWebViewState createState() => _CustomWebViewState();
}
class _CustomWebViewState extends State<CustomWebView> {
  bool isLoading = true;
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebView(...), // WebView widget
        if (isLoading)
          Container(
            color: Colors.white, // Background color
            child: Center(
              child: CircularProgressIndicator(),
            ),
          ),
      ],
    );
  }
}

В этой статье мы рассмотрели пять различных методов отображения индикатора загрузки во Flutter WebView с цветом фона. Эти методы включают использование наложений, позиционированных виджетов, внешних пакетов и создание пользовательских виджетов WebView. Реализуя эти подходы, вы можете улучшить взаимодействие с пользователем, визуально указывая ход загрузки содержимого вашего WebView.

Используя эти методы, вы можете повысить удобство использования вашего приложения Flutter WebView и поддерживать вовлеченность пользователей в процессе загрузки.