Flutter Webview

How to convert your website into mobile Application for android and ios using Webview

create flutter project using the following command in terminal/cmd

use latest flutter version. used at the time 3.19.5 download from Flutter SDK for your mac , windows

flutter create webviewapp << your project name

add dependencies in your project pubspec.yaml

  webview_flutter: ^4.7.0
  getwidget: ^4.0.0

getwidget is optional we used it for IOS loader

replace your main.dart

import 'package:flutter/material.dart';
import 'screens/home.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Coders ICU',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:const HomeScreen(),
    );
  }
}

create homepage in your lib folder

home.dart

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

class HomeScreen extends StatefulWidget {
  // ignore: use_super_parameters
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late WebViewController controller;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {},
          onPageStarted: (String url) {
            setState(() {
              _isLoading = true;
            });
          },
          onPageFinished: (String url) {
            setState(() {
              _isLoading = false;
            });
          },
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.startsWith('https://www.codericu.com/')) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse('https://codericu.com'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          WebViewWidget(controller: controller),
          if (_isLoading)
            const Center(
              child: GFLoader(type: GFLoaderType.ios),
            ),
        ],
      ),
    );
  }
}

replace your website links with https://www.codericu.com/ and https://codericu.com

add Internet Permission in your AndroidManifest.xml

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

Screenshots

Download Source code don’t forget to give me star on Github Thank you.