Make Flutter Status Bar Solid - flutter

Question

My app doesn't use AppBar, and the content is overlapping with status bar when scrolled. I tried using AnnotatedRegion<SystemUiOverlayStyle>, however it doesn't change anything.
Overlapped
My best try is using SafeArea, however it turned Status Bar to grey.
Grey Safe Area
Is there a way to maintain the automatic color of status bar, without it overlapping with the content?
Additional Note:
Flutter 1.17.5
My Tree
SafeArea
|_ SingleChildScrollView
|_ Column
|_ Container
|_ Container
|_ Container
EDIT: I just realized the automatic color (status bar follow the first container's color) was because it was transparent. I was thinking of making it solid on runtime, and read it from the first colored widget.

Answer 1

import 'package:flutter/services.dart';
#override
Widget build(BuildContext context){
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.blue, //or the color you prefer
),
child: SafeArea(child: Scaffold(...)),
);
}

Answer 2

You need to wrap your SafeArea widget with Container widget to change the color of the SafeArea widget
SAMPLE CODE
Scaffold(
backgroundColor: Colors.white,
body: Container(
color: Colors.red, /* Set your status bar color here */
child: SafeArea(
child: Container(
/* Add your Widget here */
)),
),
);
Another way You can use AppBar
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.red,
),
body: Container(
child: //widget
)
);
}