Scribd Logo
Upload

Welcome to Scribd!

  • 168 views

    Flutter Webview

    Uploaded by

    Taoufik Rachdi
    The document discusses how to use the WebView widget in Flutter to display web content within a mobile app. It provides steps to add the webview_flutter dependency, import the package, and use the WebView widget with an initial URL and Javascript enabled. An example Flutter app is also provided that demonstrates integrating a WebView to load a website.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Flutter Webview

    Uploaded by

    Taoufik Rachdi
    168 views5 pages
    The document discusses how to use the WebView widget in Flutter to display web content within a mobile app. It provides steps to add the webview_flutter dependency, import the package, and use the WebView widget with an initial URL and Javascript enabled. An example Flutter app is also provided that demonstrates integrating a WebView to load a website.

    Original Title

    flutter-webview

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses how to use the WebView widget in Flutter to display web content within a mobile app. It provides steps to add the webview_flutter dependency, import the package, and use the WebView widget with an initial URL and Javascript enabled. An example Flutter app is also provided that demonstrates integrating a WebView to load a website.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    168 views5 pages

    Flutter Webview

    Uploaded by

    Taoufik Rachdi
    The document discusses how to use the WebView widget in Flutter to display web content within a mobile app. It provides steps to add the webview_flutter dependency, import the package, and use the WebView widget with an initial URL and Javascript enabled. An example Flutter app is also provided that demonstrates integrating a WebView to load a website.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 5

    Flutter WebView Example

    Flutter WebView

    Flutter WebView widget displays a browser like space to show the webpage specified by URL. So, you can
    display a webpage just like another widget in your mobile application.

    In this tutorial, we will learn how to use WebView widget in Android Application.

    Following is a step by step process to use WebView widget in your application.

    Step 1 – pubspec.yaml dependencies

    Open pubspec.yaml file, and under dependencies add webview_flutter as shown below.
    Step 2: Import webview package

    Now, you can import webview package in your dart file.

    import 'package:webview_flutter/webview_flutter.dart';

    Step 3: Use WebView widget

    Now you can use the WebView widget in your application.

    WebViewController _controller;

    ...

    WebView(
    initialUrl: 'https://www.tutorialkart.com/',
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) {
    _controller = webViewController;
    },
    ),

    Example Flutter Application with WebView widget

    In this example, we have built a Flutter Application with a WebView widget.

    To recreate this example, create a Flutter Application, follow the above steps and replace the main.dart with the
    following.

    main.dart

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

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {


    WebViewController _controller;
    WebViewController _controller;
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
    primarySwatch: Colors.blue,
    ),
    home: Scaffold(
    appBar: AppBar(
    title: Text("TutorialKart - Flutter WebView"),
    ),
    body: Center(
    child: WebView(
    initialUrl: 'https://www.tutorialkart.com/',
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) {
    _controller = webViewController;
    },
    ),
    ),
    ),
    );
    }
    }

    Following is the pubspec.yaml file. Observe the dependencies section.

    pubspec.yaml

    name: flutter_webview
    description: An example Flutter application to demonstrate WebView widget.

    version: 1.0.0+1

    environment:
    sdk: ">=2.1.0 <3.0.0"

    dependencies:
    flutter:
    sdk: flutter
    webview_flutter: ^0.3.0
    cupertino_icons: ^0.1.2

    dev_dependencies:
    flutter_test:
    sdk: flutter

    flutter:
    uses-material-design: true

    Run the application on an Emulator or a physical device, and you should get the following output.
    Conclusion

    In this Flutter Tutorial, we learned how to create a WebView widget in your Flutter Application.

    Flutter Tutorial

    ✦ Flutter Tutorial

    ✦ Flutter - Install on Linux - Ubuntu

    ✦ Flutter - Basic Application Example

    Flutter Widgets

    ✦ Flutter Text

    ✦ Flutter TextField

    ✦ Flutter FlatButton

    ✦ Flutter RaisedButton
    ✦ Flutter RaisedButton

    ✦ Flutter SnackBar

    ✦ Flutter Switch

    ✦ Flutter ToggleButtons

    ✦ Flutter Table

    ✦ Flutter DataTable

    ✦ Flutter Tooltip

    ✦ Flutter TabBar & TabBarView

    Flutter Animation

    ✦ Flutter Animation Basic Example

    ✦ Flutter Animate Color

    Flutter Packages

    ✦ Flutter sqflite - SQLite Tutorial

    Flutter Examples

    ✦ Flutter Login Screen Sample

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy