https://flutter-examples.com/flutter-open-web-url-in-app-using-webview/
2. Find dependencies line and put webview_flutter: ^0.3.19+6 just after it.
|
1
2
3
4
|
dependencies:
webview_flutter: ^0.3.19+6
flutter:
sdk: flutter
|
Complete source code for my pubspec.yaml file after making changes:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
name: myapp
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
webview_flutter: ^0.3.19+6
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
|
3. Open your current folder project Root folder in Command Prompt or Terminal and execute flutter pub get command like i did in below screenshot.
Now your flutter project is ready to use the official flutter WebView plugin. Next step is start coding for app.
4. Open your project’s main.dart file and import material.dart and webview_flutter.dart plugin.
|
1
2
|
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
|
5. Create void main runApp() method and here we would call our main MyApp root class.
|
1
|
void main() => runApp(MyApp());
|
6. Create our main Root class named as MyApp extends with State less widget. In this class we would call the WebViewLoad class in body area.
|
1
2
3
4
5
6
7
8
9
10
11
|
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: WebViewLoad()
)
);
}
}
|
7. Create WebViewLoad class extends StatefulWidget. In this class we would call the createState() method of flutter State management and define the next child class with it.
|
1
2
3
4
5
|
class WebViewLoad extends StatefulWidget {
WebViewLoadUI createState() => WebViewLoadUI();
}
|
8. Create our main child class named as WebViewLoadUI extends with State.
|
1
2
3
4
|
class WebViewLoadUI extends State<WebViewLoad>{
}
|
9. Creating Widget Build area in WebViewLoadUI class and in the body section we would call the WebView widget.
- initialUrl : The Web URL which would display when WebView starts.
- javascriptMode : To enable and disable JavaScript on current displaying URL.
|
1
2
3
4
5
6
7
8
9
10
11
|
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('WebView in Flutter')),
body: WebView(
initialUrl: 'https://google.com',
javascriptMode: JavascriptMode.unrestricted,
)
);
}
|
10. Complete source code for main.dart file:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: WebViewLoad()
)
);
}
}
class WebViewLoad extends StatefulWidget {
WebViewLoadUI createState() => WebViewLoadUI();
}
class WebViewLoadUI extends State<WebViewLoad>{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('WebView in Flutter')),
body: WebView(
initialUrl: 'https://google.com',
javascriptMode: JavascriptMode.unrestricted,
)
);
}
}
|
Screenshot: