SliverAppBar Widget in Flutter

<p>In this example, we deal below queries.</p> <p>How to create a SliverAppBar?How to add a ListView to SliverAppBar?How to automatically adjust the text color in SliverAppBar when collapsed? Here is the final output of this program. ![](http://www.fluttercentral.com/Uploads/eece1105-70ae-4655-9129-0cef283597ce.gifwidth="50%height="auto](</p> <p id="e5c07b;](Colors.red;" _controller="" color:="" color:="" _controller.color:="" color:="" clr="">Here is the final code from main.dart. All you need to do is, copy paste this code into your newly created flutter project and run. color: rgb(187, 187, 187); background-color: rgb(40, 44, 52); font-family: Consolas, "Courier New", monospace; line-height: 19px; white-space: pre-wrap;](color: #c678dd;](import color: #98c379;]('package:flutter/material.dart'; color: #c678dd;](void color: #61afef;](main() => color: #61afef;](runApp(color: #c678dd;](new color: #e5c07b;](MyApp()); color: #c678dd;](class color: #e5c07b;](MyApp color: #c678dd;](extends color: #e5c07b;](StatelessWidget { color: #7f848e;font-style: italic;](// This widget is the root of your application. color: #c678dd;](@override color: #e5c07b;](Widget color: #61afef;](build(color: #e5c07b;](BuildContext context) { color: #c678dd;](return color: #c678dd;](new color: #e5c07b;](MaterialApp( titlecolor: #c678dd;](: color: #98c379;]('Flutter Demo', themecolor: #c678dd;](: color: #c678dd;](new color: #e5c07b;](ThemeData( color: #7f848e;font-style: italic;](// This is the theme of your application. color: #7f848e;font-style: italic;](// color: #7f848e;font-style: italic;](// Try running your application with "flutter run". You'll see the color: #7f848e;font-style: italic;](// application has a blue toolbar. Then, without quitting the app, try color: #7f848e;font-style: italic;](// changing the primarySwatch below to Colors.green and then invoke color: #7f848e;font-style: italic;](// "hot reload(press "rin the console where you ran "flutter run", color: #7f848e;font-style: italic;](// or press Run > Flutter Hot Reload in IntelliJ). Notice that the color: #7f848e;font-style: italic;](// counter didn't reset back to zero; the application is not restarted. primarySwatchcolor: #c678dd;](: color: #e5c07b;](Colors.blue, ), homecolor: #c678dd;](: color: #c678dd;](new color: #e5c07b;](MyHomePage(titlecolor: #c678dd;](: color: #98c379;]('Flutter Demo Home Page'), ); }} color: #c678dd;](class color: #e5c07b;](MyHomePage color: #c678dd;](extends color: #e5c07b;](StatefulWidget { color: #e5c07b;](MyHomePage({color: #e5c07b;](Key key, color: #e06c75;](this.title}) color: #c678dd;](: color: #e06c75;](super(keycolor: #c678dd;](: key); color: #7f848e;font-style: italic;](// This widget is the home page of your application. It is stateful, meaning color: #7f848e;font-style: italic;](// that it has a State object (defined below) that contains fields that affect color: #7f848e;font-style: italic;](// how it looks. color: #7f848e;font-style: italic;](// This class is the configuration for the state. It holds the values (in this color: #7f848e;font-style: italic;](// case the title) provided by the parent (in this case the App widget) and color: #7f848e;font-style: italic;](// used by the build method of the State. Fields in a Widget subclass are color: #7f848e;font-style: italic;](// always marked "final". color: #c678dd;](final color: #e5c07b;](String title; color: #c678dd;](@override color: #e5c07b;](_MyHomePageState color: #61afef;](createState() => color: #c678dd;](new color: #e5c07b;](_MyHomePageState();} color: #e5c07b;](ScrollController _controller; color: #c678dd;](class color: #e5c07b;](_MyHomePageState color: #c678dd;](extends color: #e5c07b;](Statecolor: #56b6c2;]( { color: #c678dd;](@override color: #c678dd;](void color: #61afef;](initState() color: #e5c07b;](Color clr color: #56b6c2;](= color: #e5c07b;](Colors.lightGreen; color: #61afef;](_scrollListener() { color: #c678dd;](if (_controller.offset color: #56b6c2;](> _controller.position.minScrollExtent color: #56b6c2;](&& !_controller.position.outOfRange) { color: #61afef;](setState(() ); } color: #c678dd;](if (_controller.offset color: #56b6c2;]([ color: #e5c07b;](SliverAppBar( pinnedcolor: #c678dd;](: color: #d19a66;](true, expandedHeightcolor: #c678dd;](: color: #d19a66;](250.0, flexibleSpacecolor: #c678dd;](: color: #e5c07b;](FlexibleSpaceBar( titlecolor: #c678dd;](: color: #e5c07b;](Text(color: #98c379;]("Demo", stylecolor: #c678dd;](: color: #c678dd;](const color: #e5c07b;](TextStyle( fontSizecolor: #c678dd;](: color: #d19a66;](10.0, fontWeightcolor: #c678dd;](: color: #e5c07b;](FontWeight.w900, colorcolor: #c678dd;](: color: #e5c07b;](Colors.green, )), backgroundcolor: #c678dd;](: color: #e5c07b;](FlutterLogo( sizecolor: #c678dd;](: color: #d19a66;](20.0, colorscolor: #c678dd;](: color: #e5c07b;](Colors.blue, ), ), backgroundColorcolor: #c678dd;](: clr, ), color: #e5c07b;](SliverFixedExtentList( itemExtentcolor: #c678dd;](: color: #d19a66;](50.0, delegatecolor: #c678dd;](: color: #e5c07b;](SliverChildBuilderDelegate( (color: #e5c07b;](BuildContext context, color: #c678dd;](int index) { color: #c678dd;](return color: #e5c07b;](Container( alignmentcolor: #c678dd;](: color: #e5c07b;](Alignment.center, colorcolor: #c678dd;](: color: #e5c07b;](Colors.lightBlue[color: #d19a66;](100 color: #56b6c2;](* (index color: #56b6c2;](% color: #d19a66;](9)], childcolor: #c678dd;](: color: #e5c07b;](Text(color: #98c379;]('list item $color: #e06c75;font-style: italic;](indexcolor: #98c379;]('), ); }, childCountcolor: #c678dd;](: color: #d19a66;](50, ), ), ], ), ), ), ); }}</p> <p>Hope this is helpful. Thanks,Srikanth</p>