search

BirjuVachhani / adaptive_theme

Easiest way to add support for light and dark theme in your flutter app.
https://pub.dev/packages/adaptive_theme
Apache License 2.0
464 stars 37 forks source link

System status bar not changing color on iOS #20

Closed Klkikok closed 3 years ago

Klkikok commented 3 years ago

When light theme mode or dark theme mode is chosen, the system status bar on an iOS device keeps the system color. For example, when light theme mode is active and i change the system theme, the color of the status bar text changes with it, instead of keeping the black text color. The same thing happens on dark theme mode. On system theme mode it works perfectly. Im using adaptive_theme: ^2.1.1. Flutter version 2.0.3.

Klkikok commented 3 years ago

flutter -v doctor [✓] Flutter (Channel unknown, 2.0.3, on macOS 11.1 20C69 darwin-x64, locale en-RS) • Flutter version 2.0.3 at /Applications/flutter • Framework revision 4d7946a68d (5 weeks ago), 2021-03-18 17:24:33 -0700 • Engine revision 3459eb2436 • Dart version 2.12.2

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2) • Android SDK at /Users/milanzezelj/Library/Android/sdk • Platform android-29, build-tools 29.0.2 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.3, Build version 12C33 • CocoaPods version 1.10.0

[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.55.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0

[✓] Connected device (1 available) • Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.128

! Doctor found issues in 1 category.

BirjuVachhani commented 3 years ago

@Klkikok This package doesn't manage or modify System UI settings. It is pure flutter code. No native code. However this might help you.

Set this in Info.plist file:

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
Klkikok commented 3 years ago

This only makes the status bar dissapear, not make it change colors.

BirjuVachhani commented 3 years ago

@Klkikok This should allow you to control the status bar from the flutter code. It should not make it disappear. Also, maybe if you set brightness for your theme right then you may not have to change it manually.

GrbavaCigla commented 3 years ago

We are using this in our themes:

var lightTheme = ThemeData(
  // General
  brightness: Brightness.light,
  primaryColor: kPrimaryColor,
  accentColor: kPrimaryColor,
  buttonColor: kPrimaryColor,
  backgroundColor: Colors.white,
  scaffoldBackgroundColor: Colors.grey.shade200,
  elevatedButtonTheme: elevatedButtonTheme,
  dialogBackgroundColor: Colors.grey.shade100,
  dialogTheme: dialogTheme,
  iconTheme: iconTheme,
  textButtonTheme: textButtonTheme,
  shadowColor: Colors.grey.shade300,
  inputDecorationTheme: inputDecorationTheme.copyWith(
    fillColor: Colors.blueGrey.shade100,
  ),
);

var darkTheme = ThemeData(
  // General
  brightness: Brightness.dark,
  primaryColor: kPrimaryColor,
  accentColor: kPrimaryColor,
  buttonColor: kPrimaryColor,
  backgroundColor: Colors.blueGrey.shade900,
  scaffoldBackgroundColor: Colors.black,
  elevatedButtonTheme: elevatedButtonTheme,
  dialogBackgroundColor: Colors.blueGrey.shade800,
  dialogTheme: dialogTheme,
  iconTheme: iconTheme,
  textButtonTheme: textButtonTheme,
  shadowColor: Colors.grey.shade100,
  inputDecorationTheme: inputDecorationTheme.copyWith(
    fillColor: Colors.blueGrey.shade900,
  ),
);
GrbavaCigla commented 3 years ago

I have set the brightness for both dark and light themes and added 2 lines to Info.plist, but it still doesn't work.

BirjuVachhani commented 3 years ago

@GrbavaCigla I checked it with the example project and it seems to be working fine. Could you please check the example project?

GrbavaCigla commented 3 years ago

I am going to try the example

GrbavaCigla commented 3 years ago

I found what is the problem. Our app uses SliverAppBar and as soon as I deleted AppBar in your example project, it started behaving same as it did with our app. How could we solve that? I thought of adding AppBar with 0 height, but I am not sure it is the right way to do it.

Edit: In the end we added AppBar widget with 0 toolbarHeight and 0 elevation. I think this library should handle apps without AppBar.

BirjuVachhani commented 3 years ago

@GrbavaCigla This library has nothing to do with any widget specifically. It allows you to control the Theme. Maybe setting a brightness for the AppBar or SliverAppBar may work. You should not have to set toolbarHeight to 0 in the AppBar.