Search code examples
flutterwebviewflutter-layoutandroid-widgetnotification-bar

How to prevent widgets from being shown in notification bar in flutter


I have a code here for a simple webview. It simply displays a webpage. However, the top part of the webpage is shown stacked below the notification bar(As in some of the buttons on the top part of the page). How can I prevent this? I know I can hide the notification bar/icons, but I want to show the contents of the webview widgets below the notification bar without hiding it. I also don't want to use an app bar. Kindly help me out

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

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

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  late WebViewController controller;
  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: WebView(
        initialUrl: 'https://flutter.dev',
        javascriptMode: JavascriptMode.unrestricted,
      )),
      debugShowCheckedModeBanner: false,
    );
  }
}

Solution

  • Just wrap your webviw with SafeArea

    import 'dart:io';
    import 'package:flutter/material.dart';
    import 'package:webview_flutter/webview_flutter.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatefulWidget {
      @override
      MyAppState createState() => MyAppState();
    }
    
    class MyAppState extends State<MyApp> {
      WebViewController controller;
      @override
      void initState() {
        super.initState();
        if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
              body: SafeArea(
                child: WebView(
                  initialUrl: 'https://flutter.dev',
                  javascriptMode: JavascriptMode.unrestricted,
                ),
              )),
          debugShowCheckedModeBanner: false,
        );
      }
    }
    

    output:

    enter image description here