Вложение веб-страниц в Flutter с помощью WebView

21 августа, 2021 12:03 пп 1 222 views | Комментариев нет

| | Комментировать запись

Плагин WebView позволяет отображать веб-страницы в приложении Flutter.

В этом руководстве мы создадим пользовательский виджет, который можно будет использовать во всем приложении для запуска WebView из любой точки.

Требования

  • Скачайте и установите Flutter.
  • Установите Android Studio или Visual Studio Code.
  • Рекомендуется также установить плагины для редактора кода:

Это руководство было проверено с помощью версий Flutter v1.22.2, Android SDK v30.0.2 и Android Studio v4.1.

1: Создание проекта

Настроив среду Flutter, вы можете запустить следующую команду, чтобы создать новое приложение:

flutter create flutter_webview_example

Перейдите в каталог нового проекта:

cd flutter_webview_example

Команда flutter create создаст простое тестовое приложение, в котором будет отображаться количество нажатий кнопки.

Откройте файл pubspec.yaml в редакторе кода и добавьте в него следующий плагин:

dependencies:
  flutter:
    sdk: flutter

  webview_flutter: ^1.0.5

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

2: Скаффолд проекта

Затем нужно обновить файл main.dart и создать новый файл home_page.dart.

Откройте существующий файл main.dart в редакторе кода, импортируйте home_page.dart и измените домашнюю страницу с MyHomePage на HomePage:

import 'package:flutter/material.dart';
import 'home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

А теперь создайте файл home_page.dart и вставьте в него следующие строки:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: FlatButton(
          child: Text("Open Webpage"),
          onPressed: () {},
        ),
      ),
    );
  }
}

Скомпилируйте свой код и запустите его в эмуляторе. Этот код создаст FlatButton с сообщением “Open Webpage”.

3: Плагин WebView

Следующим шагом будет создание StatelessWidget по имени MyWebView для отображения данных WebView.

Создайте новый файл my_webview.dart и добавьте в него следующий код:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatelessWidget {
  final String title;
  final String selectedUrl;

  final Completer<WebViewController> _controller = Completer<WebViewController>();

  MyWebView({
    @required this.title,
    @required this.selectedUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: WebView(
        initialUrl: selectedUrl,
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
      ));
  }
}

В этом руководстве мы направим пользователя на https://www.8host.com/. Используйте Navigator.push, где selectedUrl имеет значение “https://www.8host.com/”.

Зайдите еще раз в файл home_page.dart и добавьте MyWebView:

import 'package:flutter/material.dart';
import my_webview.dart;

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: FlatButton(
          child: Text("Open Webpage"),
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(
              builder: (BuildContext context) => MyWebView(
                title: "8host",
                selectedUrl: "https://www.8host.com",
              )
            ));
          },
        ),
      ),
    );
  }
}

Скомпилируйте свой код и запустите его в эмуляторе.

Нажав на кнопку Open Webpage, вы увидите, что ваше приложение Flutter отображает веб-сайт 8host.

Заключение

В этом руководстве вы научились использовать пакет WebView для вложения веб-страницы в приложение Flutter.

Читайте также:

Tags:

Добавить комментарий