Vick's

If you’re new to Flutter and want to create a simple WebView app that opens a website inside your mobile app, this guide is for you! We’ll cover everything from setting up Flutter to running your app on a real Android phone — no emulator required.

✅ Step 1: Set Up Flutter on Linux

If you haven't already, install Flutter using Snap:

sudo snap install flutter --classic

Then run:

flutter doctor

This checks your Flutter setup. Follow the on-screen tips to fix anything marked with a ❌.

✅ Step 2: Install Android SDK (No Android Studio Required)

Install the command-line Android tools:

mkdir -p ~/Android/cmdline-tools
cd ~/Android/cmdline-tools
wget https://dl.google.com/android/repository/commandlinetools-linux-10406996_latest.zip
unzip commandlinetools-linux-10406996_latest.zip
mv cmdline-tools latest

Add this to your ~/.bashrc:

export ANDROID_HOME=$HOME/Android
export PATH=$ANDROID_HOME/cmdline-tools/latest/bin:$PATH
export PATH=$ANDROID_HOME/platform-tools:$PATH

Then run:

source ~/.bashrc

Install required SDK packages:

sdkmanager --licenses
sdkmanager "platform-tools" "platforms;android-33" "build-tools;33.0.2"

✅ Step 3: Create a New Flutter Project

flutter create webview_app
cd webview_app
code .

This will open your new Flutter project in VS Code.

✅ Step 4: Add WebView Package

Edit your pubspec.yaml file and add:

dependencies:
  webview_flutter: ^4.2.4

Then run:

flutter pub get

✅ Step 5: Add Internet Permission

Edit android/app/src/main/AndroidManifest.xml and add:

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

Also, inside the <application> tag, add:

android:usesCleartextTraffic="true"

✅ Step 6: Replace main.dart with WebView Code

Open lib/main.dart and edit this part of code (get reference to full code on github)

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'imvickykumar999.online',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: const Color(0xFF04203F),
        iconTheme: const IconThemeData(color: Colors.white),
      ),
      body: WebViewWidget(controller: _controller),
    );
  }

✅ Step 7: Connect Your Android Device

1. Connect your Android phone via USB

2. Enable Developer Options > USB Debugging

3. Run this to check if your phone is connected:

flutter devices

If it's listed, run the app:

flutter run

🎉 Your WebView app will now launch on your phone!

💻 Full Source Code

You can find the complete Flutter WebView app source code in this public GitHub repository:

🔗 https://github.com/imvickykumar999/Flutter-Webview

Feel free to clone, fork, or contribute. This repository contains:

• main.dart file

• pubspec.yaml dependencies

• Android configurations (AndroidManifest.xml)

• Screenshots and documentation