Flutter How to check if Sliver AppBar is expanded or collapsed?











up vote
0
down vote

favorite












I am using a SliverAppBar in Flutter, with a background widget.



The thing is When it's expanded, the title and icons (leading and actions) should be white in order to be seen correctly, and when it's collapsed, they should be changed to black.



Any ideas on how I can get a bool out of it? Or other ways of resolving this problem.



Thank you.



class SliverExample extends StatefulWidget {
final Widget backgroundWidget;
final Widget bodyWidgets;

SliverExample({
this.backgroundWidget,
this.body,
});
@override
_SliverExampleState createState() => _SliverExampleState();
}

class _SliverExampleState extends State<SliverExample> {

// I need something like this
// To determine if SliverAppBar is expanded or not.
bool isAppBarExpanded = false;

@override
Widget build(BuildContext context) {

// To change the item's color accordingly
// To be used in multiple places in code
Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

// In my case PrimaryColor is white,
// and the background widget is dark

return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
leading: BackButton(
color: itemColor, // Here
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.shopping_cart,
color: itemColor, // Here
),
onPressed: () {},
),
],
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'title',
style: TextStyle(
fontSize: 18.0,
color: itemColor, // Here
),
),
// Not affecting the question.
background: widget.backgroundWidget,
),
),
// Not affecting the question.
SliverToBoxAdapter(child: widget.body),
],
),
);
}
}









share|improve this question









New contributor




Sina Seirafi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • Please Add Your Code also !
    – anmol.majhail
    2 days ago










  • @anmol.majhail Thanks for the heads up.
    – Sina Seirafi
    2 days ago










  • stackoverflow.com/a/51927031/10269042
    – anmol.majhail
    2 days ago















up vote
0
down vote

favorite












I am using a SliverAppBar in Flutter, with a background widget.



The thing is When it's expanded, the title and icons (leading and actions) should be white in order to be seen correctly, and when it's collapsed, they should be changed to black.



Any ideas on how I can get a bool out of it? Or other ways of resolving this problem.



Thank you.



class SliverExample extends StatefulWidget {
final Widget backgroundWidget;
final Widget bodyWidgets;

SliverExample({
this.backgroundWidget,
this.body,
});
@override
_SliverExampleState createState() => _SliverExampleState();
}

class _SliverExampleState extends State<SliverExample> {

// I need something like this
// To determine if SliverAppBar is expanded or not.
bool isAppBarExpanded = false;

@override
Widget build(BuildContext context) {

// To change the item's color accordingly
// To be used in multiple places in code
Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

// In my case PrimaryColor is white,
// and the background widget is dark

return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
leading: BackButton(
color: itemColor, // Here
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.shopping_cart,
color: itemColor, // Here
),
onPressed: () {},
),
],
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'title',
style: TextStyle(
fontSize: 18.0,
color: itemColor, // Here
),
),
// Not affecting the question.
background: widget.backgroundWidget,
),
),
// Not affecting the question.
SliverToBoxAdapter(child: widget.body),
],
),
);
}
}









share|improve this question









New contributor




Sina Seirafi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • Please Add Your Code also !
    – anmol.majhail
    2 days ago










  • @anmol.majhail Thanks for the heads up.
    – Sina Seirafi
    2 days ago










  • stackoverflow.com/a/51927031/10269042
    – anmol.majhail
    2 days ago













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I am using a SliverAppBar in Flutter, with a background widget.



The thing is When it's expanded, the title and icons (leading and actions) should be white in order to be seen correctly, and when it's collapsed, they should be changed to black.



Any ideas on how I can get a bool out of it? Or other ways of resolving this problem.



Thank you.



class SliverExample extends StatefulWidget {
final Widget backgroundWidget;
final Widget bodyWidgets;

SliverExample({
this.backgroundWidget,
this.body,
});
@override
_SliverExampleState createState() => _SliverExampleState();
}

class _SliverExampleState extends State<SliverExample> {

// I need something like this
// To determine if SliverAppBar is expanded or not.
bool isAppBarExpanded = false;

@override
Widget build(BuildContext context) {

// To change the item's color accordingly
// To be used in multiple places in code
Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

// In my case PrimaryColor is white,
// and the background widget is dark

return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
leading: BackButton(
color: itemColor, // Here
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.shopping_cart,
color: itemColor, // Here
),
onPressed: () {},
),
],
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'title',
style: TextStyle(
fontSize: 18.0,
color: itemColor, // Here
),
),
// Not affecting the question.
background: widget.backgroundWidget,
),
),
// Not affecting the question.
SliverToBoxAdapter(child: widget.body),
],
),
);
}
}









share|improve this question









New contributor




Sina Seirafi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











I am using a SliverAppBar in Flutter, with a background widget.



The thing is When it's expanded, the title and icons (leading and actions) should be white in order to be seen correctly, and when it's collapsed, they should be changed to black.



Any ideas on how I can get a bool out of it? Or other ways of resolving this problem.



Thank you.



class SliverExample extends StatefulWidget {
final Widget backgroundWidget;
final Widget bodyWidgets;

SliverExample({
this.backgroundWidget,
this.body,
});
@override
_SliverExampleState createState() => _SliverExampleState();
}

class _SliverExampleState extends State<SliverExample> {

// I need something like this
// To determine if SliverAppBar is expanded or not.
bool isAppBarExpanded = false;

@override
Widget build(BuildContext context) {

// To change the item's color accordingly
// To be used in multiple places in code
Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

// In my case PrimaryColor is white,
// and the background widget is dark

return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
leading: BackButton(
color: itemColor, // Here
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.shopping_cart,
color: itemColor, // Here
),
onPressed: () {},
),
],
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'title',
style: TextStyle(
fontSize: 18.0,
color: itemColor, // Here
),
),
// Not affecting the question.
background: widget.backgroundWidget,
),
),
// Not affecting the question.
SliverToBoxAdapter(child: widget.body),
],
),
);
}
}






flutter flutter-sliver






share|improve this question









New contributor




Sina Seirafi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











share|improve this question









New contributor




Sina Seirafi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









share|improve this question




share|improve this question








edited 2 days ago





















New contributor




Sina Seirafi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









asked 2 days ago









Sina Seirafi

72




72




New contributor




Sina Seirafi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





New contributor





Sina Seirafi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.






Sina Seirafi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.












  • Please Add Your Code also !
    – anmol.majhail
    2 days ago










  • @anmol.majhail Thanks for the heads up.
    – Sina Seirafi
    2 days ago










  • stackoverflow.com/a/51927031/10269042
    – anmol.majhail
    2 days ago


















  • Please Add Your Code also !
    – anmol.majhail
    2 days ago










  • @anmol.majhail Thanks for the heads up.
    – Sina Seirafi
    2 days ago










  • stackoverflow.com/a/51927031/10269042
    – anmol.majhail
    2 days ago
















Please Add Your Code also !
– anmol.majhail
2 days ago




Please Add Your Code also !
– anmol.majhail
2 days ago












@anmol.majhail Thanks for the heads up.
– Sina Seirafi
2 days ago




@anmol.majhail Thanks for the heads up.
– Sina Seirafi
2 days ago












stackoverflow.com/a/51927031/10269042
– anmol.majhail
2 days ago




stackoverflow.com/a/51927031/10269042
– anmol.majhail
2 days ago












2 Answers
2






active

oldest

votes

















up vote
0
down vote













You need to use ScrollController to achieve the desired effect



try this code



void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SliverExample(
bodyWidgets: Text('Hello Body gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg'),
backgroundWidget: Text('Hello Background'),
),
);
}
}
class SliverExample extends StatefulWidget {
final Widget backgroundWidget;
final Widget bodyWidgets;

SliverExample({
this.backgroundWidget,
this.bodyWidgets,
});
@override
_SliverExampleState createState() => _SliverExampleState();
}

class _SliverExampleState extends State<SliverExample> {

// I need something like this
// To determine if SliverAppBar is expanded or not.
ScrollController _scrollController;
bool isAppBarExpanded = false;

@override
void initState() {
super.initState();

_scrollController = ScrollController()
..addListener(() => setState(() {
print('Scroll view Listener is called offset ${_scrollController.offset}');
}));
}
bool get _changecolor {
return _scrollController.hasClients
&& _scrollController.offset > (200-kToolbarHeight);
}

@override
Widget build(BuildContext context) {

// To change the item's color accordingly
// To be used in multiple places in code
//Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

// In my case PrimaryColor is white,
// and the background widget is dark

return Scaffold(
body: CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
SliverAppBar(

pinned: true,
leading: BackButton(
color: _changecolor? Colors.white: Colors.black, // Here
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.shopping_cart,
color: _changecolor? Colors.white: Colors.black, // Here
),
onPressed: () {},
),
],
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'title',
style: TextStyle(
fontSize: 18.0,
color: _changecolor? Colors.white: Colors.black, // Here
),
),
// Not affecting the question.
background: widget.backgroundWidget,

),
),
// Not affecting the question.
SliverToBoxAdapter(child: widget.bodyWidgets),
],
),
);
}
}





share|improve this answer








New contributor




Saed Nabil is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

























    up vote
    0
    down vote













    You can use LayoutBuilder to get sliver AppBar biggest height. When biggest.height = 80.0, it actually means sliver appbar is collapsed.



    Here is a full example:



    import 'package:flutter/material.dart';

    void main() => runApp(MaterialApp(
    home: MyApp(),
    ));

    class MyApp extends StatefulWidget {
    @override
    _MyAppState createState() => _MyAppState();
    }

    class _MyAppState extends State<MyApp> {
    var top = 0.0;

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    body: NestedScrollView(
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
    return <Widget>[
    SliverAppBar(
    expandedHeight: 200.0,
    floating: false,
    pinned: true,
    flexibleSpace: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
    // print('constraints=' + constraints.toString());
    top = constraints.biggest.height;
    return FlexibleSpaceBar(
    centerTitle: true,
    title: AnimatedOpacity(
    duration: Duration(milliseconds: 300),
    //opacity: top == 80.0 ? 1.0 : 0.0,
    opacity: 1.0,
    child: Text(
    top.toString(),
    style: TextStyle(fontSize: 12.0),
    )),
    background: Image.network(
    "https://images.unsplash.com/photo-1542601098-3adb3baeb1ec?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5bb9a9747954cdd6eabe54e3688a407e&auto=format&fit=crop&w=500&q=60",
    fit: BoxFit.cover,
    ));
    })),
    ];
    },body: ListView.builder(
    itemCount: 100,
    itemBuilder: (context,index){
    return Text("List Item: " + index.toString());
    },
    ),
    ));
    }
    }


    Final result:



    enter image description here






    share|improve this answer





















      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });






      Sina Seirafi is a new contributor. Be nice, and check out our Code of Conduct.










       

      draft saved


      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372276%2fflutter-how-to-check-if-sliver-appbar-is-expanded-or-collapsed%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes








      up vote
      0
      down vote













      You need to use ScrollController to achieve the desired effect



      try this code



      void main() => runApp(MyApp());

      class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
      return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      primarySwatch: Colors.blue,
      ),
      home: SliverExample(
      bodyWidgets: Text('Hello Body gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg'),
      backgroundWidget: Text('Hello Background'),
      ),
      );
      }
      }
      class SliverExample extends StatefulWidget {
      final Widget backgroundWidget;
      final Widget bodyWidgets;

      SliverExample({
      this.backgroundWidget,
      this.bodyWidgets,
      });
      @override
      _SliverExampleState createState() => _SliverExampleState();
      }

      class _SliverExampleState extends State<SliverExample> {

      // I need something like this
      // To determine if SliverAppBar is expanded or not.
      ScrollController _scrollController;
      bool isAppBarExpanded = false;

      @override
      void initState() {
      super.initState();

      _scrollController = ScrollController()
      ..addListener(() => setState(() {
      print('Scroll view Listener is called offset ${_scrollController.offset}');
      }));
      }
      bool get _changecolor {
      return _scrollController.hasClients
      && _scrollController.offset > (200-kToolbarHeight);
      }

      @override
      Widget build(BuildContext context) {

      // To change the item's color accordingly
      // To be used in multiple places in code
      //Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

      // In my case PrimaryColor is white,
      // and the background widget is dark

      return Scaffold(
      body: CustomScrollView(
      controller: _scrollController,
      slivers: <Widget>[
      SliverAppBar(

      pinned: true,
      leading: BackButton(
      color: _changecolor? Colors.white: Colors.black, // Here
      ),
      actions: <Widget>[
      IconButton(
      icon: Icon(
      Icons.shopping_cart,
      color: _changecolor? Colors.white: Colors.black, // Here
      ),
      onPressed: () {},
      ),
      ],
      expandedHeight: 200.0,
      flexibleSpace: FlexibleSpaceBar(
      centerTitle: true,
      title: Text(
      'title',
      style: TextStyle(
      fontSize: 18.0,
      color: _changecolor? Colors.white: Colors.black, // Here
      ),
      ),
      // Not affecting the question.
      background: widget.backgroundWidget,

      ),
      ),
      // Not affecting the question.
      SliverToBoxAdapter(child: widget.bodyWidgets),
      ],
      ),
      );
      }
      }





      share|improve this answer








      New contributor




      Saed Nabil is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






















        up vote
        0
        down vote













        You need to use ScrollController to achieve the desired effect



        try this code



        void main() => runApp(MyApp());

        class MyApp extends StatelessWidget {
        // This widget is the root of your application.
        @override
        Widget build(BuildContext context) {
        return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
        primarySwatch: Colors.blue,
        ),
        home: SliverExample(
        bodyWidgets: Text('Hello Body gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg'),
        backgroundWidget: Text('Hello Background'),
        ),
        );
        }
        }
        class SliverExample extends StatefulWidget {
        final Widget backgroundWidget;
        final Widget bodyWidgets;

        SliverExample({
        this.backgroundWidget,
        this.bodyWidgets,
        });
        @override
        _SliverExampleState createState() => _SliverExampleState();
        }

        class _SliverExampleState extends State<SliverExample> {

        // I need something like this
        // To determine if SliverAppBar is expanded or not.
        ScrollController _scrollController;
        bool isAppBarExpanded = false;

        @override
        void initState() {
        super.initState();

        _scrollController = ScrollController()
        ..addListener(() => setState(() {
        print('Scroll view Listener is called offset ${_scrollController.offset}');
        }));
        }
        bool get _changecolor {
        return _scrollController.hasClients
        && _scrollController.offset > (200-kToolbarHeight);
        }

        @override
        Widget build(BuildContext context) {

        // To change the item's color accordingly
        // To be used in multiple places in code
        //Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

        // In my case PrimaryColor is white,
        // and the background widget is dark

        return Scaffold(
        body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
        SliverAppBar(

        pinned: true,
        leading: BackButton(
        color: _changecolor? Colors.white: Colors.black, // Here
        ),
        actions: <Widget>[
        IconButton(
        icon: Icon(
        Icons.shopping_cart,
        color: _changecolor? Colors.white: Colors.black, // Here
        ),
        onPressed: () {},
        ),
        ],
        expandedHeight: 200.0,
        flexibleSpace: FlexibleSpaceBar(
        centerTitle: true,
        title: Text(
        'title',
        style: TextStyle(
        fontSize: 18.0,
        color: _changecolor? Colors.white: Colors.black, // Here
        ),
        ),
        // Not affecting the question.
        background: widget.backgroundWidget,

        ),
        ),
        // Not affecting the question.
        SliverToBoxAdapter(child: widget.bodyWidgets),
        ],
        ),
        );
        }
        }





        share|improve this answer








        New contributor




        Saed Nabil is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.




















          up vote
          0
          down vote










          up vote
          0
          down vote









          You need to use ScrollController to achieve the desired effect



          try this code



          void main() => runApp(MyApp());

          class MyApp extends StatelessWidget {
          // This widget is the root of your application.
          @override
          Widget build(BuildContext context) {
          return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
          primarySwatch: Colors.blue,
          ),
          home: SliverExample(
          bodyWidgets: Text('Hello Body gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg'),
          backgroundWidget: Text('Hello Background'),
          ),
          );
          }
          }
          class SliverExample extends StatefulWidget {
          final Widget backgroundWidget;
          final Widget bodyWidgets;

          SliverExample({
          this.backgroundWidget,
          this.bodyWidgets,
          });
          @override
          _SliverExampleState createState() => _SliverExampleState();
          }

          class _SliverExampleState extends State<SliverExample> {

          // I need something like this
          // To determine if SliverAppBar is expanded or not.
          ScrollController _scrollController;
          bool isAppBarExpanded = false;

          @override
          void initState() {
          super.initState();

          _scrollController = ScrollController()
          ..addListener(() => setState(() {
          print('Scroll view Listener is called offset ${_scrollController.offset}');
          }));
          }
          bool get _changecolor {
          return _scrollController.hasClients
          && _scrollController.offset > (200-kToolbarHeight);
          }

          @override
          Widget build(BuildContext context) {

          // To change the item's color accordingly
          // To be used in multiple places in code
          //Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

          // In my case PrimaryColor is white,
          // and the background widget is dark

          return Scaffold(
          body: CustomScrollView(
          controller: _scrollController,
          slivers: <Widget>[
          SliverAppBar(

          pinned: true,
          leading: BackButton(
          color: _changecolor? Colors.white: Colors.black, // Here
          ),
          actions: <Widget>[
          IconButton(
          icon: Icon(
          Icons.shopping_cart,
          color: _changecolor? Colors.white: Colors.black, // Here
          ),
          onPressed: () {},
          ),
          ],
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          title: Text(
          'title',
          style: TextStyle(
          fontSize: 18.0,
          color: _changecolor? Colors.white: Colors.black, // Here
          ),
          ),
          // Not affecting the question.
          background: widget.backgroundWidget,

          ),
          ),
          // Not affecting the question.
          SliverToBoxAdapter(child: widget.bodyWidgets),
          ],
          ),
          );
          }
          }





          share|improve this answer








          New contributor




          Saed Nabil is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.









          You need to use ScrollController to achieve the desired effect



          try this code



          void main() => runApp(MyApp());

          class MyApp extends StatelessWidget {
          // This widget is the root of your application.
          @override
          Widget build(BuildContext context) {
          return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
          primarySwatch: Colors.blue,
          ),
          home: SliverExample(
          bodyWidgets: Text('Hello Body gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg'),
          backgroundWidget: Text('Hello Background'),
          ),
          );
          }
          }
          class SliverExample extends StatefulWidget {
          final Widget backgroundWidget;
          final Widget bodyWidgets;

          SliverExample({
          this.backgroundWidget,
          this.bodyWidgets,
          });
          @override
          _SliverExampleState createState() => _SliverExampleState();
          }

          class _SliverExampleState extends State<SliverExample> {

          // I need something like this
          // To determine if SliverAppBar is expanded or not.
          ScrollController _scrollController;
          bool isAppBarExpanded = false;

          @override
          void initState() {
          super.initState();

          _scrollController = ScrollController()
          ..addListener(() => setState(() {
          print('Scroll view Listener is called offset ${_scrollController.offset}');
          }));
          }
          bool get _changecolor {
          return _scrollController.hasClients
          && _scrollController.offset > (200-kToolbarHeight);
          }

          @override
          Widget build(BuildContext context) {

          // To change the item's color accordingly
          // To be used in multiple places in code
          //Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

          // In my case PrimaryColor is white,
          // and the background widget is dark

          return Scaffold(
          body: CustomScrollView(
          controller: _scrollController,
          slivers: <Widget>[
          SliverAppBar(

          pinned: true,
          leading: BackButton(
          color: _changecolor? Colors.white: Colors.black, // Here
          ),
          actions: <Widget>[
          IconButton(
          icon: Icon(
          Icons.shopping_cart,
          color: _changecolor? Colors.white: Colors.black, // Here
          ),
          onPressed: () {},
          ),
          ],
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          title: Text(
          'title',
          style: TextStyle(
          fontSize: 18.0,
          color: _changecolor? Colors.white: Colors.black, // Here
          ),
          ),
          // Not affecting the question.
          background: widget.backgroundWidget,

          ),
          ),
          // Not affecting the question.
          SliverToBoxAdapter(child: widget.bodyWidgets),
          ],
          ),
          );
          }
          }






          share|improve this answer








          New contributor




          Saed Nabil is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.









          share|improve this answer



          share|improve this answer






          New contributor




          Saed Nabil is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.









          answered 2 days ago









          Saed Nabil

          945




          945




          New contributor




          Saed Nabil is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.





          New contributor





          Saed Nabil is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.






          Saed Nabil is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.
























              up vote
              0
              down vote













              You can use LayoutBuilder to get sliver AppBar biggest height. When biggest.height = 80.0, it actually means sliver appbar is collapsed.



              Here is a full example:



              import 'package:flutter/material.dart';

              void main() => runApp(MaterialApp(
              home: MyApp(),
              ));

              class MyApp extends StatefulWidget {
              @override
              _MyAppState createState() => _MyAppState();
              }

              class _MyAppState extends State<MyApp> {
              var top = 0.0;

              @override
              Widget build(BuildContext context) {
              return Scaffold(
              body: NestedScrollView(
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
              SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
              // print('constraints=' + constraints.toString());
              top = constraints.biggest.height;
              return FlexibleSpaceBar(
              centerTitle: true,
              title: AnimatedOpacity(
              duration: Duration(milliseconds: 300),
              //opacity: top == 80.0 ? 1.0 : 0.0,
              opacity: 1.0,
              child: Text(
              top.toString(),
              style: TextStyle(fontSize: 12.0),
              )),
              background: Image.network(
              "https://images.unsplash.com/photo-1542601098-3adb3baeb1ec?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5bb9a9747954cdd6eabe54e3688a407e&auto=format&fit=crop&w=500&q=60",
              fit: BoxFit.cover,
              ));
              })),
              ];
              },body: ListView.builder(
              itemCount: 100,
              itemBuilder: (context,index){
              return Text("List Item: " + index.toString());
              },
              ),
              ));
              }
              }


              Final result:



              enter image description here






              share|improve this answer

























                up vote
                0
                down vote













                You can use LayoutBuilder to get sliver AppBar biggest height. When biggest.height = 80.0, it actually means sliver appbar is collapsed.



                Here is a full example:



                import 'package:flutter/material.dart';

                void main() => runApp(MaterialApp(
                home: MyApp(),
                ));

                class MyApp extends StatefulWidget {
                @override
                _MyAppState createState() => _MyAppState();
                }

                class _MyAppState extends State<MyApp> {
                var top = 0.0;

                @override
                Widget build(BuildContext context) {
                return Scaffold(
                body: NestedScrollView(
                headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                return <Widget>[
                SliverAppBar(
                expandedHeight: 200.0,
                floating: false,
                pinned: true,
                flexibleSpace: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                // print('constraints=' + constraints.toString());
                top = constraints.biggest.height;
                return FlexibleSpaceBar(
                centerTitle: true,
                title: AnimatedOpacity(
                duration: Duration(milliseconds: 300),
                //opacity: top == 80.0 ? 1.0 : 0.0,
                opacity: 1.0,
                child: Text(
                top.toString(),
                style: TextStyle(fontSize: 12.0),
                )),
                background: Image.network(
                "https://images.unsplash.com/photo-1542601098-3adb3baeb1ec?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5bb9a9747954cdd6eabe54e3688a407e&auto=format&fit=crop&w=500&q=60",
                fit: BoxFit.cover,
                ));
                })),
                ];
                },body: ListView.builder(
                itemCount: 100,
                itemBuilder: (context,index){
                return Text("List Item: " + index.toString());
                },
                ),
                ));
                }
                }


                Final result:



                enter image description here






                share|improve this answer























                  up vote
                  0
                  down vote










                  up vote
                  0
                  down vote









                  You can use LayoutBuilder to get sliver AppBar biggest height. When biggest.height = 80.0, it actually means sliver appbar is collapsed.



                  Here is a full example:



                  import 'package:flutter/material.dart';

                  void main() => runApp(MaterialApp(
                  home: MyApp(),
                  ));

                  class MyApp extends StatefulWidget {
                  @override
                  _MyAppState createState() => _MyAppState();
                  }

                  class _MyAppState extends State<MyApp> {
                  var top = 0.0;

                  @override
                  Widget build(BuildContext context) {
                  return Scaffold(
                  body: NestedScrollView(
                  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                  return <Widget>[
                  SliverAppBar(
                  expandedHeight: 200.0,
                  floating: false,
                  pinned: true,
                  flexibleSpace: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                  // print('constraints=' + constraints.toString());
                  top = constraints.biggest.height;
                  return FlexibleSpaceBar(
                  centerTitle: true,
                  title: AnimatedOpacity(
                  duration: Duration(milliseconds: 300),
                  //opacity: top == 80.0 ? 1.0 : 0.0,
                  opacity: 1.0,
                  child: Text(
                  top.toString(),
                  style: TextStyle(fontSize: 12.0),
                  )),
                  background: Image.network(
                  "https://images.unsplash.com/photo-1542601098-3adb3baeb1ec?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5bb9a9747954cdd6eabe54e3688a407e&auto=format&fit=crop&w=500&q=60",
                  fit: BoxFit.cover,
                  ));
                  })),
                  ];
                  },body: ListView.builder(
                  itemCount: 100,
                  itemBuilder: (context,index){
                  return Text("List Item: " + index.toString());
                  },
                  ),
                  ));
                  }
                  }


                  Final result:



                  enter image description here






                  share|improve this answer












                  You can use LayoutBuilder to get sliver AppBar biggest height. When biggest.height = 80.0, it actually means sliver appbar is collapsed.



                  Here is a full example:



                  import 'package:flutter/material.dart';

                  void main() => runApp(MaterialApp(
                  home: MyApp(),
                  ));

                  class MyApp extends StatefulWidget {
                  @override
                  _MyAppState createState() => _MyAppState();
                  }

                  class _MyAppState extends State<MyApp> {
                  var top = 0.0;

                  @override
                  Widget build(BuildContext context) {
                  return Scaffold(
                  body: NestedScrollView(
                  headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                  return <Widget>[
                  SliverAppBar(
                  expandedHeight: 200.0,
                  floating: false,
                  pinned: true,
                  flexibleSpace: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                  // print('constraints=' + constraints.toString());
                  top = constraints.biggest.height;
                  return FlexibleSpaceBar(
                  centerTitle: true,
                  title: AnimatedOpacity(
                  duration: Duration(milliseconds: 300),
                  //opacity: top == 80.0 ? 1.0 : 0.0,
                  opacity: 1.0,
                  child: Text(
                  top.toString(),
                  style: TextStyle(fontSize: 12.0),
                  )),
                  background: Image.network(
                  "https://images.unsplash.com/photo-1542601098-3adb3baeb1ec?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5bb9a9747954cdd6eabe54e3688a407e&auto=format&fit=crop&w=500&q=60",
                  fit: BoxFit.cover,
                  ));
                  })),
                  ];
                  },body: ListView.builder(
                  itemCount: 100,
                  itemBuilder: (context,index){
                  return Text("List Item: " + index.toString());
                  },
                  ),
                  ));
                  }
                  }


                  Final result:



                  enter image description here







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered 2 days ago









                  Jack Sun

                  356




                  356






















                      Sina Seirafi is a new contributor. Be nice, and check out our Code of Conduct.










                       

                      draft saved


                      draft discarded


















                      Sina Seirafi is a new contributor. Be nice, and check out our Code of Conduct.













                      Sina Seirafi is a new contributor. Be nice, and check out our Code of Conduct.












                      Sina Seirafi is a new contributor. Be nice, and check out our Code of Conduct.















                       


                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372276%2fflutter-how-to-check-if-sliver-appbar-is-expanded-or-collapsed%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      404 Error Contact Form 7 ajax form submitting

                      How to know if a Active Directory user can login interactively

                      TypeError: fit_transform() missing 1 required positional argument: 'X'