Change the color of a container based on the position of a SingleChildScrollView in Flutter

Question

I have an app that shows its content in a SingleChildScrollView. There is Container with a transparent color that I'd like to change the color of to red when the SingleChildScrollView is scrolled to any other position than the start position and then change the color back to transparent when the SingleChildScrollView is scrolled back to its starting position. Code:

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              Flexible(
                child: ScrollConfiguration(
                  behavior: RemoveScrollGlow(),
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        Stack(...) //This is the top section of the page
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
          Container(
            color: Colors.transparent, //This is the Color I want to change based on the position of the SingleChildScrollView
            height: 120,
            child: Column(...)
          ),
        ],
      ),
      backgroundColor: Colors.white,
    );
  }
}

EDIT: I managed to make it work by wrapping the SingleChildScrollView in a NotificationListener and updating the color based on the notification like this:

class _AppState extends State<App> {
  Color bannercolor = Colors.transparent;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              Flexible(
                child: ScrollConfiguration(
                  behavior: RemoveScrollGlow(),
                  child: NotificationListener<ScrollUpdateNotification>(
                    onNotification: (scrollEnd) {
                      final metrics = scrollEnd.metrics;
                      if (metrics.pixels != 0) {
                        setState(() {
                          bannercolor = Colors.white;
                        });
                      } else {
                        setState(() {
                          bannercolor = Colors.transparent;
                        });
                      }
                      return true;
                    },
                    child: SingleChildScrollView(
                      child: Column(
                        children: [
                          Column(...),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
          Container(
            color: bannercolor,
            height: 120,
            child: Column(...),
          ),
        ],
      ),
      backgroundColor: Colors.white,
    );
  }
}

score 0 · Answer 1 · answered Jul 21 '22 at 01:32

You can try listening to the scroll controller offset like this

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
 final ScrollController _scrollController = ScrollController ();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              Flexible(
                child: ScrollConfiguration(
                  behavior: RemoveScrollGlow(),
                  child: SingleChildScrollView(
                   controller: _scrollController, //add controller here
                    child: Column(
                      children: [
                        Stack(...) //This is the top section of the page
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
         AnimatedBuilder(
              animation: _scrollController, 
         builder: (context, _content) {
          return  Container (
    (_scrollController.offset>20)? Colors.blue: Colors.transparent, 
            height: 120,
            child: Column(...)
          );
         }
         ),
        ],
      ),
      backgroundColor: Colors.white,
    );
  }
}

Change the color of a container based on the position of a SingleChildScrollView in Flutter

1 Answers1