AppBar 顶部的黑条 Flutter

Question

I am trying to build a small app in flutter, and I do have a black bar coming on top of my app on a Samsung Galaxy S9+. The bar also appears in when using the emulator.

Could anyone help me find whats causes this?

See the picture attached.

Thanks for the help

and here is the main screen code

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'register_house.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'findMe',
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _homePageLocation = CameraPosition(
    target: LatLng(3.8189673, 11.5010141),
    zoom: 14.4746,
  );

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('findMe'),
      ),
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _homePageLocation,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: goToRegisterPage,
        label: Text('Add my House'),
        icon: Icon(Icons.home),
      ),
    );
  }

  void _pushPage(BuildContext context, Widget page) {
    Navigator.of(context).push(
      MaterialPageRoute<void>(builder: (_) => page),
    );
  }

  void goToRegisterPage() {
    _pushPage(context, RegisterPage());
  }
} //delimits class

Answer 1

Okay I faced the same issue and after multiple trial and error I fixed it. Just goto your AndroidManifest.xml class (android/app/src/main/AndroidManifest.xml) and under the MainActivity added, change the theme to NoTitleBar

            android:theme="@android:style/Theme.NoTitleBar"

Answer 2

You need to add styles.xml to android/app/src/main/res in values and values-night folders

/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <!-- Show a splash screen on the activity. Automatically removed when
         Flutter draws its first frame -->
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>
<!-- Theme applied to the Android Window as soon as the process has started.
     This theme determines the color of the Android Window while your
     Flutter UI initializes, as well as behind your Flutter UI while its
     running.
     
     This Theme is only used starting with V2 of Flutter's Android embedding. -->
<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowBackground">?android:colorBackground</item>
</style>

/values-night/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <!-- Show a splash screen on the activity. Automatically removed when
         Flutter draws its first frame -->
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>
<!-- Theme applied to the Android Window as soon as the process has started.
     This theme determines the color of the Android Window while your
     Flutter UI initializes, as well as behind your Flutter UI while its
     running.
     
     This Theme is only used starting with V2 of Flutter's Android embedding. -->
<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowBackground">?android:colorBackground</item>
</style>

This toolbar appears when these files are deleted