Flutter webview example step by step in 2024

In this blog, we will explore How to integrate Flutter webview example step by step in 2024. You can easily use this code in your android studio.

How to Integrate Flutter Webview Example Step by Step in 2024

Step 1 : Add Webview Dependency in your "pubspec.yaml" File

Go to your "Studio" -> Open "Project" Folder -> Open "pubspec.yaml" File -> Add "webview_flutter: ^4.8.0" in "pubspec.yaml" File

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  webview_flutter: ^4.8.0

Step 2 : Add Internet Connection Permission in your "AndroidManifest.xml" File

Go to your "Studio" -> Open "Project" Folder -> Open "android" Folder -> Open "app" Folder -> Open "src" Folder -> Open "main" Folder -> Open "AndroidManifest.xml" File -> Add below Internet Permission in your "AndroidManifest.xml" File

<uses-permission android:name="android.permission.INTERNET"/>

Step 3 : Create "WebViewContainer.dart" File in your Lib folder

Go to your "Studio" -> Open "Project" Folder -> Open "lib" Folder -> Create "WebViewContainer.dart"

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

class WebViewContainer extends StatefulWidget {
  const WebViewContainer({super.key});

 @override
  State<WebViewContainer> createState() => _WebViewContainerState();
}
class _WebViewContainerState extends State<WebViewContainer> {
  final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse("https://www.oversimplifiedcoding.com"));

  @override
  Widget build(BuildContext context) {
    return SafeArea(child: WebViewWidget(
      controller: controller,
    ));
  }

}

Step 4 : Create "main.dart" File in your Lib folder

Go to your "Studio" -> Open "Project" Folder -> Open "lib" Folder -> Create "main.dart"

import 'package:flutter/material.dart';
import 'package:my_test_app/WebViewContainer.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: TextTheme(
          headlineLarge: TextStyle(
              color: Colors.white, fontSize: 25, fontFamily: 'MainFont'),
          headlineMedium: TextStyle(color: Colors.black, fontSize: 20),
          titleMedium: TextStyle(color: Colors.red, fontSize: 16),
        ),
        useMaterial3: true,
      ),
      home: const WebViewContainer(),
    );
  }
}

Reference

here are the reference video of complete tutorial of Flutter webview example step by step in 2024 you can easily learn and use in your code.

Conclusion

In this blog i have shown you how to create Flutter webview example step by step in 2024. you can easily use this code and modify according to your use.