Flutter : How to change status bar color when scrolling with SingleChildScrollView - scroll

Question

I'm new with flutter.
I'm creating a new page with SingleChildScrollView.
my problem is how to change status bar color only when scrolling active?
I've seen this effect from here but this code for sliver.
everytime scroll active at some offset, the statusbar color change.
here's the example picture what I want achieve : screenshoot
here's my basic code :
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
HomeScreen({Key key}) : super(key: key);
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
void initState() {
super.initState();
_scrollController = ScrollController();
_scrollController.addListener(_scrollListener);
}
#override
void dispose() {
_scrollController.removeListener(_scrollListener);
_scrollController.dispose();
super.dispose();
}
void _scrollListener() {
setState(() {
});
}
final image = 'assets/images/bg_header.png';
ScrollController _scrollController;
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Stack(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Image.asset(
image,
fit: BoxFit.cover,
),
),
Container(
padding: EdgeInsets.all(40.0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.5,
decoration: BoxDecoration(color: Color.fromRGBO(14, 67, 39, .8)),
),
Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 25.0),
child: Column(
children: <Widget>[
some content....
],
),
),
],
),
),
);
}
}

Answer 1

after trying some code, i found solution implement using Inkino app.
here's the work code :
main.dart
import 'package:flutter/material.dart';
import 'package:scroll_effects.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
ScrollController _scrollController;
ScrollEffects _scrollEffects;
#override
void initState() {
super.initState();
_scrollController = ScrollController();
_scrollController.addListener(_scrollListener);
_scrollEffects = ScrollEffects();
}
#override
void dispose() {
_scrollController.removeListener(_scrollListener);
_scrollController.dispose();
super.dispose();
}
void _scrollListener() {
setState(() {
_scrollEffects.updateScrollOffset(context, _scrollController.offset);
});
}
Widget _buildStatusBarBackground() {
final statusBarColor = Theme.of(context).primaryColor;
return Container(
height: _scrollEffects.statusBarHeight,
color: statusBarColor,
);
}
#override
Widget build(BuildContext context) {
final content = <Widget>[
**list widget.....**
];
content.add(const SizedBox(height: 32.0));
final scrollview = CustomScrollView(
physics: ClampingScrollPhysics(),
controller: _scrollController,
slivers: [
SliverList(delegate: SliverChildListDelegate(content)),
],
);
return Scaffold(
// backgroundColor: const Color(0xFFF0F0F0),
body: Stack(
children: [
scrollview,
_buildStatusBarBackground(),
],
),
);
}
}
and here's scroll_effects.dart :
import 'dart:math';
import 'package:flutter/material.dart';
class ScrollEffects {
static const double kHeaderHeight = 225.0;
ScrollEffects() {
updateScrollOffset(null, 0.0);
}
double _scrollOffset;
double statusBarHeight;
void updateScrollOffset(BuildContext context, double offset) {
_scrollOffset = offset;
_recalculateValues(context);
}
void _recalculateValues(BuildContext context) {
statusBarHeight = _calculateStatusBarHeight(context);
}
double _calculateStatusBarHeight(BuildContext context) {
double statusBarMaxHeight = 0.0;
if (context != null) {
statusBarMaxHeight = MediaQuery.of(context).padding.top;
}
return max(
0.0,
min(
statusBarMaxHeight,
_scrollOffset - kHeaderHeight + (statusBarMaxHeight * 4),
),
);
}
}