Home » Android » android – Is there an AppBar in flutter totally dynamic elevation and background color?-Exceptionshub

android – Is there an AppBar in flutter totally dynamic elevation and background color?-Exceptionshub

Posted by: admin February 26, 2020 Leave a comment

Questions:

I’m trying to do a dynamic app bar, when the scroll offset of the page is 0, the background color need to be transparent, the logo need to be white and the elevation 0, and, when the scroll offset change from 0, need transition to change the background color to white, the elevation to 5 and the logo color to red

The image when scroll offset is 0

And here is when scroll offset is greater than 0

I’ve already tried this code:

 @override
  void initState() {
    super.initState();
    _scrollController = ScrollController()
      ..addListener(() {
        setState(() {
          offset = _scrollController.offset;
        });
      });
  }

...

final double transitionColor = min(max(offset, 0), 100) / 100;
final double transitionElevation = min(max(offset, 0), 50) / 10;

LjAppBar.getAppBar(
  brandingColor: offset != 0 ? LjTheme.ljPrimary.withOpacity(transitionColor) : Colors.white,
  backgroundColor: Colors.white.withOpacity(transitionColor),
  elevation: transitionElevation,
),

But, is so slowly the effects and the application and is not working well… i hope someone can help me

How to&Answers:

To my knowledge, the only way you can deal with this is by using SliverAppBar. Slivers in Flutter are widgets that can respond dynamically different scrolling statuses. Check out Slivers, demystified for a nice introduction on the topic from Emily Fortuna from the Flutter team.

In your case, with SliverAppBar, you can change the color, elevation, etc. of your app bar depending on the scrolling of your list. You will need SliverList for that.

It’s kind of difficult to wrap your head around Sliver widgets, but don’t get discouraged! Once you get used to them you will be able to achieve what you want.