Building a Responsive WebView App in Flutter with Splash Screen, Full-Screen Mode, and Error Handling

Hi, my name is Akash Vishwakarma. In this article, I will show you step by step how to create a Flutter WebView application that takes a URL and renders it in a full-screen view. We will add a splash screen, offline error handling, and other enhancements to make the app more professional and user-friendly.

Why Build a WebView App in Flutter?

If you already have a website or web app and want to launch it on mobile quickly, WebView is the fastest solution. By wrapping your site inside a Flutter app, you can add features like splash screens, error handling, and full-screen mode without rebuilding your site from scratch.

Step 1: Create a New Flutter Project

flutter create webview_app
cd webview_app

This creates a fresh Flutter project.

Step 2: Add Dependencies

Open your pubspec.yaml and add:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.2.2
  connectivity_plus: ^6.0.3

The connectivity_plus package helps us detect internet connection status.

Step 3: Create a Splash Screen

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

  @override
  State createState() => _SplashScreenState();
}

class _SplashScreenState extends State {
  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(seconds: 3), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const WebApp()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: Text(
          'Welcome to My WebApp',
          style: TextStyle(color: Colors.white, fontSize: 26, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Step 4: Full-Screen WebView Without AppBar

We don’t want a navigation bar. Let’s go immersive by filling the entire screen with WebView.

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

  @override
  State createState() => _WebAppState();
}

class _WebAppState extends State {
  late final WebViewController controller;
  bool hasError = false;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..enableZoom(true)
      ..setBackgroundColor(const Color(0xFFFFFFFF))
      ..setNavigationDelegate(
        NavigationDelegate(
          onWebResourceError: (error) {
            setState(() {
              hasError = true;
            });
          },
        ),
      )
      ..loadRequest(Uri.parse('https://flutter.dev'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: hasError
          ? const Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.wifi_off, size: 50, color: Colors.red),
                  SizedBox(height: 10),
                  Text('No internet connection'),
                ],
              ),
            )
          : SafeArea(
              child: WebViewWidget(controller: controller),
            ),
    );
  }
}

Step 5: Add Pull-to-Refresh

Mobile users expect to refresh the page by pulling down. We can wrap WebView inside RefreshIndicator.

RefreshIndicator(
  onRefresh: () async {
    await controller.reload();
  },
  child: WebViewWidget(controller: controller),
)

Step 6: Add Custom Offline Page

Instead of a blank error, let’s show a nice offline page.

body: hasError
  ? Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          Icon(Icons.cloud_off, size: 70, color: Colors.grey),
          SizedBox(height: 20),
          Text('You are offline. Please check your connection.'),
        ],
      ),
    )
  : WebViewWidget(controller: controller),

Step 7: Make It Responsive

Use SafeArea to avoid notches.
Set JavaScriptMode.unrestricted to support modern responsive websites.
Enable zoom gestures for better accessibility.

Step 8: Dynamic URL Option

You can allow users to enter a URL dynamically. For example, using a TextField and a button to load a new website:

TextField(
  decoration: const InputDecoration(
    hintText: 'Enter a website URL',
  ),
  onSubmitted: (url) {
    controller.loadRequest(Uri.parse(url));
  },
)

Final Touches

Hide the app bar for immersive experience.
Show your app logo or brand name on the splash screen.
Add error icons and friendly text to offline screens.
Make sure your site itself is responsive so the app looks good on all screen sizes.

Building a Responsive WebView App in Flutter with Splash Screen and Error Handling

Comments