android 如何正确使用webview_flutter包显示网站?

mwg9r5ms  于 2023-05-05  发布在  Android
关注(0)|答案(1)|浏览(225)

我试着写了一个代码,显示我的网站上扑应用程序,在底部栏有两个按钮,可以做向前和向后.但是WebView包显示了一个错误。我使用Flutter 3.7.5和vsCode作为我的IDE。这是我的代码。

  1. import 'dart:async';
  2. import 'package:flutter/material.dart';
  3. import 'package:webview_flutter/webview_flutter.dart';
  4. void main() => runApp(MyApp());
  5. class MyApp extends StatelessWidget {
  6. final _controller = Completer<WebViewController>();
  7. @override
  8. Widget build(BuildContext context) {
  9. return MaterialApp(
  10. home: Scaffold(
  11. appBar: AppBar(
  12. title: Text('keeTube'),
  13. ),
  14. body: WebView (
  15. initialUrl: "https://keetube.netlify.app/",
  16. onWebViewCreated: (controller) => _controller.complete(controller),
  17. ),
  18. bottomNavigationBar: Container(
  19. color: Theme.of(context).accentColor,
  20. child: Padding(
  21. padding: EdgeInsets.only(bottom: 20, right: 20),
  22. child: ButtonBar(
  23. children: [
  24. navigationButton(
  25. Icons.chevron_left, (controller) => _goBack(controller)),
  26. navigationButton(
  27. Icons.chevron_right, (controller) => _goForward(controller))
  28. ],
  29. ),
  30. ),
  31. ),
  32. ),
  33. );
  34. }
  35. Widget navigationButton(
  36. IconData icon, Function(WebViewController) onPressed) {
  37. return FutureBuilder(
  38. future: _controller.future,
  39. builder: (context, AsyncSnapshot<WebViewController> snapshot) {
  40. if (snapshot.hasData) {
  41. return IconButton(
  42. icon: Icon(
  43. icon,
  44. color: Colors.white,
  45. ),
  46. onPressed: () => onPressed(snapshot.data!));
  47. } else {
  48. return Container();
  49. }
  50. });
  51. }
  52. void _goBack(WebViewController controller) async {
  53. final canGoBack = await controller.canGoBack();
  54. if (canGoBack) {
  55. controller.goBack();
  56. }
  57. }
  58. void _goForward(WebViewController controller) async {
  59. final canGoForward = await controller.canGoForward();
  60. if (canGoForward) {
  61. controller.goForward();
  62. }
  63. }
  64. }

它让我在“Webview”关键字上出现了这个错误
未为类型“MyApp”定义方法“WebView”。尝试将名称更正为现有方法的名称,或定义名为“WebView”的方法
1.我在pubspec.yaml文件上安装了依赖项

  1. dependencies:
  2. flutter:
  3. sdk: flutter
  4. webview_flutter: ^4.2.0
  1. [webapp] flutter pub get
  2. Running "flutter pub get" in webapp...
  3. Resolving dependencies...
  4. async 2.10.0 (2.11.0 available)
  5. characters 1.2.1 (1.3.0 available)
  6. collection 1.17.0 (1.17.1 available)
  7. js 0.6.5 (0.6.7 available)
  8. lints 2.0.1 (2.1.0 available)
  9. matcher 0.12.13 (0.12.16 available)
  10. material_color_utilities 0.2.0 (0.5.0 available)
  11. meta 1.8.0 (1.9.1 available)
  12. path 1.8.2 (1.8.3 available)
  13. source_span 1.9.1 (1.10.0 available)
  14. test_api 0.4.16 (0.5.2 available)
  15. Got dependencies!

1.我把minSdkVersion改成了19

  1. defaultConfig {
  2. // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
  3. applicationId "com.example.webapp"
  4. // You can update the following values to match your application needs.
  5. // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
  6. minSdkVersion 19
  7. targetSdkVersion flutter.targetSdkVersion
  8. versionCode flutterVersionCode.toInteger()
  9. versionName flutterVersionName
  10. }

所以如果有人能告诉我如何修复它作为显示一个网站。

1aaf6o9v

1aaf6o9v1#

您可以使用以下代码创建WebView:

  1. import 'package:flutter/material.dart';
  2. import 'package:webview_flutter/webview_flutter.dart';
  3. void main() {
  4. runApp(
  5. const MaterialApp(
  6. home: WebViewApp(),
  7. ),
  8. );
  9. }
  10. class WebViewApp extends StatefulWidget {
  11. const WebViewApp({super.key});
  12. @override
  13. State<WebViewApp> createState() => _WebViewAppState();
  14. }
  15. class _WebViewAppState extends State<WebViewApp> {
  16. late final WebViewController controller;
  17. @override
  18. void initState() {
  19. super.initState();
  20. controller = WebViewController()
  21. ..setJavaScriptMode(JavaScriptMode.unrestricted)
  22. ..setBackgroundColor(const Color(0x00000000))
  23. ..setNavigationDelegate(
  24. NavigationDelegate(
  25. onProgress: (int progress) {
  26. // Update loading bar.
  27. },
  28. onPageStarted: (String url) {},
  29. onPageFinished: (String url) {},
  30. onWebResourceError: (WebResourceError error) {},
  31. onNavigationRequest: (NavigationRequest request) {
  32. if (request.url.startsWith('https://www.youtube.com/')) {
  33. return NavigationDecision.prevent;
  34. }
  35. return NavigationDecision.navigate;
  36. },
  37. ),
  38. )
  39. ..loadRequest(Uri.parse('https://keetube.netlify.app/'));
  40. }
  41. @override
  42. Widget build(BuildContext context) {
  43. return Scaffold(
  44. appBar: AppBar(
  45. title: const Text('keeTube'),
  46. ),
  47. body: WebViewWidget(
  48. controller: controller,
  49. ),
  50. );
  51. }
  52. }

有关更多详细信息,请查看此https://pub.dev/packages/webview_flutter

展开查看全部

相关问题