1

can we use API to change this color on iOS/Android in Flutter?

enter image description here

TeeTracker
  • 7,064
  • 8
  • 40
  • 46

2 Answers2

1

Yes, You can use API to change the color of the bottom safe area try with the below code. I hope your problem will be resolved.

@override
 Widget build(BuildContext context) {
   return FutureBuilder<ModelClassName>(
      future: getColorFromAPI....,
      builder:(context,snapshot){
         final color = snapshot.data;
         return Container(
           color: color,
           child: SafeArea(
            top: false,
            child: Scaffold(
             resizeToAvoidBottomInset: false,
             
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Change Bottom Bar Color',
              ),
            ],
          ),
        ),
       ),
      ),
     ),
    }
   );
  }
 }

enter image description here

Tina Detroja
  • 124
  • 6
  • this workaround works only when using AppBar, also it is not the goal, it would possibly change the status bar, this is not we want, because the goal is ONLY to change the region I pointed to. – TeeTracker Aug 15 '22 at 12:49
  • Remove app bar from code then also work.If i am not understand your problem then please tell me in detailed i will try to help you – Tina Detroja Aug 15 '22 at 12:55
  • What does the code above do? It changes the color of the in-app bottom bar to the color of the outside-app bottom navigation bar...? Coz I wanted to do the opposite. – Karolina Hagegård Jul 11 '23 at 14:28
  • The above code is used for change color of the bottom safe area of mobile.Please explain in detail what you need to change – Tina Detroja Jul 12 '23 at 12:31
0

If you want to use with Package try this

import 'package:flutter_statusbarcolor_ns/flutter_statusbarcolor_ns.dart';

FlutterStatusbarcolor.setStatusBarColor(Colors.white);

Without package, Recommended solution (Flutter 2.0 and above)

You have to add in "main.dart" file so it's reflect overall application.

import 'package:flutter/services.dart';

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));
Nitin Gadhiya
  • 359
  • 1
  • 7