Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter statusbar color is not changing in ios

I want to use light status bar to some of my screens and need to set it back to dark statusbar when navigate from those screens. I made a widget and wrapped those screens for it. It works for android and not for ios. I dont need to use appbar and annoted region

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class LightStatusBarWidget extends ConsumerStatefulWidget {
    final VoidCallback? onPop;
    final Widget child;
    final bool didReplace;

    const LightStatusBarWidget({
        super.key,
        required this.child,
        this.onPop,
        this.didReplace = true,
    });

    @override
    ConsumerState<ConsumerStatefulWidget> createState() =>    _LightStatusBarWidgetState();
}

class _LightStatusBarWidgetState extends ConsumerState<LightStatusBarWidget> {
    @override
    void initState() {
        super.initState();
        SystemChrome.setEnabledSystemUIMode(
            SystemUiMode.manual,
            overlays: [SystemUiOverlay.top],
        );
        WidgetsBinding.instance.addPostFrameCallback((_) {
            setStatusBarColor(isLight: true);
        });
    }

    @override
    void dispose() {
        WidgetsBinding.instance.addPostFrameCallback((_) {
            setStatusBarColor(isLight: widget.didReplace ? false : true);
        });
        super.dispose();
    }

    void setStatusBarColor({bool isLight = false}) {
        SystemChrome.setSystemUIOverlayStyle(
            SystemUiOverlayStyle(
                statusBarColor: isLight ? Colors.white : Colors.black,
                 statusBarIconBrightness: isLight ? Brightness.dark :     Brightness.light,
                statusBarBrightness: isLight ? Brightness.light : Brightness.dark,
            ),
         );
   }

    @override
    Widget build(BuildContext context) {
        return PopScope(
            onPopInvokedWithResult: (didPop, result) {
                setStatusBarColor(isLight: false);
                widget.onPop?.call();
            },
            child: SafeArea(child: widget.child),
        );
    }
}
like image 276
Vinaya Augusthy Avatar asked Dec 09 '25 16:12

Vinaya Augusthy


1 Answers

Check with this code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class LightStatusBarWidget extends ConsumerStatefulWidget {
  final VoidCallback? onPop;
  final Widget child;
  final bool didReplace;

  const LightStatusBarWidget({
    super.key,
    required this.child,
    this.onPop,
    this.didReplace = true,
  });

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _LightStatusBarWidgetState();
}

class _LightStatusBarWidgetState extends ConsumerState<LightStatusBarWidget> {
  @override
  void initState() {
    super.initState();
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: [SystemUiOverlay.top],
    );
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setStatusBarColor(isLight: true);
    });
  }

  @override
  void dispose() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setStatusBarColor(isLight: widget.didReplace ? false : true);
    });
    super.dispose();
  }

  void setStatusBarColor({bool isLight = false}) {
    if (Theme.of(context).platform == TargetPlatform.iOS) {
      // Handle iOS-specific status bar style
      SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle(
          statusBarColor: Colors.transparent, // Transparent to avoid overlay color issues on iOS
          statusBarIconBrightness: isLight ? Brightness.dark : Brightness.light,
          statusBarBrightness: isLight ? Brightness.light : Brightness.dark,
        ),
      );
    } else {
      // Handle Android-specific status bar style
      SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle(
          statusBarColor: isLight ? Colors.white : Colors.black,
          statusBarIconBrightness: isLight ? Brightness.dark : Brightness.light,
          statusBarBrightness: isLight ? Brightness.light : Brightness.dark,
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return PopScope(
      onPopInvokedWithResult: (didPop, result) {
        setStatusBarColor(isLight: false);
        widget.onPop?.call();
      },
      child: SafeArea(child: widget.child),
    );
  }
}
like image 60
WhisperingWinds Avatar answered Dec 11 '25 09:12

WhisperingWinds



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!