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

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),
      ),
    );
  }
}