Flutter Question posted in
The official Flutter documentation can be found here.

why safearea color remains darker than scaffold color eventhough applying samecolor in flutter?

I have noticed color shade difference between scaffold color and safe area color eventhough i am applying same colors to it.

IT’s NOT WORKING if i applying following

Color color=const Color(0xE8024585);

but ITS WORKING with following

Color color=Colors.blue;

so what is exact issue

class PractiseScreen extends StatelessWidget {
  const PractiseScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Color color=const Color(0xE8024585);
    //Color color=Colors.blue;// this is showing same color
    return Container(
      color: color,
      child: SafeArea(
        child: Scaffold(
        backgroundColor: color,
        body: Container(
          color: color,
          child: Center(child: Text('Safearea is darker than scaffod',style: TextStyle(
            color: Colors.white
          ),),),
        ),
      ),),
    );
  }
}
Tags:

2

Answers


  1. 0

    This issue is because of the opacity component in the color you’re using Color(0xE8024585). when you want to use a color with hexadecimal value the first 2 digits are the alpha channel which is for the opacity of the color.
    Colors.blue is a predefined color that its alpa is 0xFF. by changing your alpha part to 0xFF your issue is going to be solve.because using 0xFF for the alpha side means that you want a fully opaque color.

    FF ==> 100% of opacity.

    class PractiseScreen extends StatelessWidget {
  const PractiseScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Make the color fully opaque by setting the alpha to 0xFF
    Color color = const Color(0xFF024585);

    return Container(
      color: color,
      child: SafeArea(
        child: Scaffold(
          backgroundColor: color,
          body: Container(
            color: color,
            child: Center(
              child: Text(
                'SafeArea is darker than Scaffold',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

    Happy coding…

    Login or Signup to reply.
  2. 0

    Interestingly, here’s how I resolved that case:

    Replace your code snippet,

    class PractiseScreen extends StatelessWidget {
  const PractiseScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Color color=const Color(0xE8024585);
    //Color color=Colors.blue;// this is showing same color
    return Container(
      color: color,
      child: SafeArea(
        child: Scaffold(
        backgroundColor: color,
        body: Container(
          color: color,
          child: Center(child: Text('Safearea is darker than scaffod',style: TextStyle(
            color: Colors.white
          ),),),
        ),
      ),),
    );
  }
}

    with,

    import 'package:flutter/material.dart';

class PractiseScreen extends StatelessWidget {
  const PractiseScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Color color = const Color(0xE8024585);
    // Color color = Colors.blue; // this is showing same color

    return Scaffold(
      backgroundColor: color,
      appBar: AppBar(
        backgroundColor: color,
        toolbarHeight:
            0, // to resolve the issue of having distinct color with the system bar, or if you want to use an `AppBar`,
               // you can remove the toolbarHeight property or replace it with `kToolbarHeight` to have a default toolbarHeight
      ),
      body: Container(
        color: color,
        child: Center(
          child: Text(
            'Safearea is darker than scaffod',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

    UPDATE:

    To achieve the same output with using your current code snippet, here’s how:

    Use SystemChrome.setSystemUIOverlayStyle:

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

class PractiseScreen extends StatelessWidget {
  const PractiseScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Color color = const Color(0xE8024585);

    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarColor: color,
        statusBarBrightness: Brightness.light, // Status bar icons (for iOS)
        statusBarIconBrightness:
            Brightness.dark, // Status bar icons (for Android)
      ),
    );

    return Scaffold(
      backgroundColor: color,
      body: Container(
        color: color,
        child: Center(
          child: Text(
            'Safearea is darker than scaffod',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

    This will be the output from the two modified code snippets:

    output

    Don’t mind the padding-like from the upper-left corner; it’s due to my device’s front camera.

    I hope it helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search