Building an Android App with WebView Using URLs

WebView is a powerful component in Android development that allows developers to embed web content directly into their applications. While initially loading a static URL is straightforward, there are scenarios where developers might need to dynamically change the website URL during runtime. In this blog post, we’ll explore how to achieve this functionality effectively.

Using WebView to Display Websites: WebView is commonly used in Android apps to display web content, such as websites, within the app’s user interface. Typically, developers initialize a WebView with a specific URL using the loadUrl() method.

Example:-

 ..loadRequest(Uri.parse('https://www.wizbrand.com/tools/all-in-one'));

Step 1:- Import Dependencies in main.dart

Step 2:- Import from https://pub.dev/packages/webview_flutter/install

Step 3:- If the import dependencies file is not found in main.dart
Mouse Hover on the package and then click on Quick Fix-> Add’webview_flutter’ to dependencies

Step 4:- Write a code in main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'All In One',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
    home: const WebViewDemo(),
    );
  }
}

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

  @override
  State<WebViewDemo> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<WebViewDemo> {
  WebViewController controller = WebViewController();
  @override
void initState(){
  super.initState();
  controller
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))
  ..setNavigationDelegate(NavigationDelegate(
     onProgress: (progress) => {},
     onPageStarted: (url) => {},
     onPageFinished: (url) => {},
  ))
  ..loadRequest(Uri.parse('https://www.wizbrand.com/tools/all-in-one'));
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Tools')
      ),
body: WebViewWidget(controller: controller),
    );
  }
}

Output:- Refresh the Emulator

Hopefully, It will help you…!!

Related Posts

Kubernetes Consulting Services: GitOps and Container Orchestration for Dutch Teams

Introduction Think about the last time an app failed you. Maybe a payment froze, or a login page stalled. In that moment, you did not care about…

Read More

MotoShare: The Ultimate Platform for Vehicle Rentals and Fleet Management in Japan

Introduction Japan rewards travelers who explore by road. The asphalt is smooth. The mountain passes wind through cedar forests. Neon city streets glow after dark. A rental…

Read More

How DataOps Optimizes Real-Time Analytics and Stops Pipeline Breaks

Data teams face a huge challenge today. You need to stream data, process it instantly, and give clean reports to leaders. But your pipelines break constantly. A…

Read More

The DataOps Playbook That Saved a Tire Giant 8 Hours a Day

Introduction Your factory server just crashed. Again. Production stopped. Orders are backing up. And somewhere in a spreadsheet, someone is manually typing data that should have been…

Read More

First Time Renting a Scooter, Bike, or Car in Indonesia? A Beginner’s Complete Guide

Introduction Never rented a vehicle before? You are in the right place. This guide assumes you know nothing. Every step is explained in simple words, from papers…

Read More

Mastering Multi-Cloud Data Operations for Modern Teams

Data pipelines break when teams use three different clouds and zero shared rules. You spend hours hunting down missing data tables instead of building products. This chaos…

Read More
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
0
Would love your thoughts, please comment.x
()
x