{"id":2121,"date":"2022-04-08T05:32:28","date_gmt":"2022-04-08T05:32:28","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2121"},"modified":"2022-04-08T05:32:28","modified_gmt":"2022-04-08T05:32:28","slug":"flutter-slivers","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/08\/flutter-slivers\/","title":{"rendered":"Flutter Slivers"},"content":{"rendered":"\n<p><strong>Sliver is a portion of the scrollable area which is used to achieve a custom scrolling effect<\/strong>. In other words, the sliver widget is a slice of the viewport. We can implement all of the scrollable views, such as ListView, GridView using slivers. It is a lower-level interface that provides excellent control over implementing a scrollable area. It is useful while scrolling large numbers of children widgets in a scrollable area. As they are based on the viewport, it can change their shape, size, and extent based on several events and offset.<\/p>\n\n\n\n<p>Flutter provides several kinds of slivers, some of them are given below:<\/p>\n\n\n\n<ul><li>SliverAppBar<\/li><li>SliverList<\/li><li>SliverGrid<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to use slivers?<\/h2>\n\n\n\n<p>It is to note that all of the sliver&#8217;s components should always be placed inside a&nbsp;<strong>CustomScrollView<\/strong>. After that, we can combine the list of slivers to make the custom scrollable area.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is CustomScrollView?<\/h2>\n\n\n\n<p>CustomScrollView in\u00a0Flutter\u00a0is a scroll view that allows us to create various scrolling effects such as grids, lists, and expanding headers. It has a\u00a0<strong>sliver property<\/strong>\u00a0where we can pass a list of widgets that include SliverAppBar, SliverToBoxAdapter, SliverList, and SliverGrid, etc.<\/p>\n\n\n\n<p>Let us discuss each sliver in detail.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">SliverAppBar<\/h2>\n\n\n\n<p>SliverAppBar is a material design app bar in Flutter that integrates with a CustomScrollView. Generally, we used it as the first child of CustomScrollView.&nbsp;<strong>It can vary in height and float above the other widget<\/strong>&nbsp;of the scroll view. It allows us to create an app bar with various scrolling effects.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Properties of SliverAppBar<\/h3>\n\n\n\n<p>The following are the essential properties of the SliverAppBar:<\/p>\n\n\n\n<p><strong>actions:<\/strong>&nbsp;This property is used to create widgets right of the appBar title. Generally, it is an iconButton that represents common operations.<\/p>\n\n\n\n<p><strong>title:<\/strong>&nbsp;This property is used to define the title to the SliverAppBar. It is similar to the AppBar title to give the name of the application.<\/p>\n\n\n\n<p><strong>leading:<\/strong>&nbsp;This property is used to define a widget left to the title. Generally, it is used to place the Menu Drawer widget.<\/p>\n\n\n\n<p><strong>backgroundColor:<\/strong>&nbsp;This property is used to define a background color to the sliver app bar.<\/p>\n\n\n\n<p><strong>bottom:<\/strong>&nbsp;This property is used to create space to the bottom of the title, where we can define any widget according to our needs.<\/p>\n\n\n\n<p><strong>expandedHeight:<\/strong>&nbsp;This property is used to specify the maximum height to the app bar that can be expanded while scrolling. It must be defined in a double value.<\/p>\n\n\n\n<p><strong>floating:<\/strong>&nbsp;This property determines whether the app bar will be visible or not when the user scrolls towards the app bar.<\/p>\n\n\n\n<p><strong>flexibleSpace:<\/strong>&nbsp;This property is used to define a widget which is stacked behind the toolbar and the tab bar. Its height is the same as the app bar&#8217;s overall height.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example<\/h3>\n\n\n\n<p>In the below example, we will see how to use the SliverAppBar with CustomScrollView.<a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><span style=\"font-family: var(--list--font-family); background-color: var(--global--color-background); color: var(--global--color-primary); font-size: var(--global--font-size-base);\">\u00a0<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n        body: CustomScrollView(  \n          slivers: &lt;Widget>&#91;  \n            SliverAppBar(  \n              actions: &lt;Widget>&#91;  \n                Icon(Icons.person, size: 40,)  \n            ],  \n              title: Text(\"SliverAppBar Example\"),  \n              leading: Icon(Icons.menu),  \n              backgroundColor: Colors.green,  \n              expandedHeight: 100.0,  \n              floating: true,  \n              pinned: true  \n            )  \n            \/\/ Place sliver widgets here  \n          ],  \n        ),  \n      ),  \n    );  \n  }  \n} <\/code><\/pre>\n\n\n\n<p><strong>Output<\/strong><\/p>\n\n\n\n<p>When we run the app, we should get the UI of the screen similar to the below screenshot:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-slivers.png\" alt=\"Flutter Slivers\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">SliverList<\/h2>\n\n\n\n<p>SliverList is a sliver that&nbsp;<strong>places the children in a linear array or one-dimensional array<\/strong>. It takes a&nbsp;<strong>delegate parameter<\/strong>&nbsp;to provide the items in the list in a way they will scroll into view. We can specify the children&#8217;s list using a&nbsp;<strong>SliverChildListDelegate<\/strong>&nbsp;or build them with a&nbsp;<strong>SliverChildBuilderDelegate<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example<\/h3>\n\n\n\n<p>In the below example, we will see how to use the SliverList with CustomScrollView.<a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n        body: CustomScrollView(  \n          slivers: &lt;Widget>&#91;  \n            SliverAppBar(  \n              actions: &lt;Widget>&#91;  \n                Icon(Icons.person, size: 40,)  \n            ],  \n              title: Text(\"SliverList Example\"),  \n              leading: Icon(Icons.menu),  \n              backgroundColor: Colors.green,  \n              expandedHeight: 100.0,  \n              floating: true,  \n              pinned: true  \n            ),  \n            SliverList(  \n              delegate: new SliverChildListDelegate(_buildList(20)),  \n            ),\/\/ Place sliver widgets here  \n          ],  \n        ),  \n      ),  \n    );  \n  }  \n}  \nList _buildList(int count) {  \n  List&lt;Widget> listItems = List();  \n  for (int i = 0; i &lt; count; i++) {  \n    listItems.add(new Padding(padding: new EdgeInsets.all(16.0),  \n        child: new Text(  \n            'Sliver Item ${i.toString()}',  \n            style: new TextStyle(fontSize: 22.0)  \n        )  \n    ));  \n  }  \n  return listItems;  \n}<\/code><\/pre>\n\n\n\n<p><strong>Output<\/strong><\/p>\n\n\n\n<p>When we run the app, we should get the UI of the screen similar to the below screenshot:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-slivers2.png\" alt=\"Flutter Slivers\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">SliverGrid<\/h2>\n\n\n\n<p>SliverGrids&nbsp;<strong>places the children in a two-dimensional arrangement<\/strong>. It also uses a delegate to specify the children or an explicit list similar to the SliverList. But it has additional formatting to the cross-axis dimension on a grid. It allows the three ways to specify the grid layout:<\/p>\n\n\n\n<p>1. It uses&nbsp;<strong>Count Constructor<\/strong>&nbsp;for counting the number of items in the horizontal axis. See the below code:<a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><\/p>\n\n\n\n<ol><li><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>SliverGrid.count(  \n  crossAxisCount: 3,  \n  mainAxisSpacing: 20.0,  \n  crossAxisSpacing: 20.0,  \n  childAspectRatio: 3.0,  \n  children: &lt;Widget>&#91;  \n    Container(color: Colors.red),  \n    Container(color: Colors.blue),  \n    Container(color: Colors.green),  \n    Container(color: Colors.red),  \n    Container(color: Colors.blue),  \n    Container(color: Colors.green),  \n  ],  \n),  <\/code><\/pre>\n\n\n\n<p>2. It uses\u00a0<strong>Extent Constructor<\/strong>, which specifies the maximum width of the items. It is most useful when the grid items vary in size. It means we can limit how large space they should take up. See the below code:<a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>SliverGrid.extent(  \n  maxCrossAxisExtent: 200,  \n  mainAxisSpacing: 10.0,  \n  crossAxisSpacing: 10.0,  \n  childAspectRatio: 4.0,  \n  children: &lt;Widget>&#91;  \n    Container(color: Colors.orange),  \n    Container(color: Colors.yellow),  \n    Container(color: Colors.purple),  \n    Container(color: Colors.pink),  \n    Container(color: Colors.green),  \n    Container(color: Colors.indigo),  \n  ],  \n),  <\/code><\/pre>\n\n\n\n<p>3. It uses&nbsp;<strong>Default constructor<\/strong>&nbsp;which is pass in an explicit&nbsp;<strong>gridDelegate<\/strong>&nbsp;parameter:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example<\/h3>\n\n\n\n<p>In the below example, we will see how to use the SliverGrid with CustomScrollView.<a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n        body: CustomScrollView(  \n          slivers: &lt;Widget>&#91;  \n            SliverAppBar(  \n              actions: &lt;Widget>&#91;  \n                Icon(Icons.camera_front, size: 40,)  \n            ],  \n              title: Text(\"SliverGrid Example\"),  \n              leading: Icon(Icons.menu),  \n              backgroundColor: Colors.green,  \n              expandedHeight: 100.0,  \n              floating: true,  \n              pinned: true  \n            ),  \n            SliverGrid(  \n              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(  \n                crossAxisCount: 4,  \n              ) ,  \n              delegate: SliverChildBuilderDelegate((BuildContext context, int index) {  \n                return new Container(  \n                    color: _randomPaint(index),  \n                    height: 150.0  \n                );  \n              }),  \n            ),  \n          ],  \n        ),  \n      ),  \n    );  \n  }  \n}  \nColor _randomPaint(int index) {  \n  if (index % 3 == 0) {  \n    return Colors.orange;  \n  } else if (index % 3 == 1) {  \n    return Colors.blue;  \n  }  \n  return Colors.red;  \n} <\/code><\/pre>\n\n\n\n<p><strong>Output<\/strong><\/p>\n\n\n\n<p>When we run the app, we should get the UI of the screen similar to the following screenshot:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-slivers3.png\" alt=\"Flutter Slivers\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">SliverFixedExtentList and SliverToBoxAdapter<\/h2>\n\n\n\n<p>A SliverFixedExtentList is a sliver that&nbsp;<strong>holds multiple children with the same main-axis extent in a one-dimensional array or linear array<\/strong>. It is more efficient than SliverList because there is no need to perform layouts on its children to obtain the main-axis extent. It does not allow a gap between its children. It requires each child to have the&nbsp;<strong>SliverConstraints.crossAxisExtent<\/strong>&nbsp;in the cross axis and the&nbsp;<strong>itemExtent<\/strong>&nbsp;property on the main-axis.<\/p>\n\n\n\n<p>A SliverToBoxAdapter is a sliver that can&nbsp;<strong>hold only a single box widget<\/strong>. It is useful when we want to display only a single child widget in CustomScrollView to create a custom scroll effect. If we need to display multiple box widgets in a CustomScrollView, we must use the SliverList, SliverFixedExtentList, or SliverGrid.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example<\/h3>\n\n\n\n<p>In the below example, we will see how to use the SliverFixedExtentList and SliverToBoxAdapter with CustomScrollView.<a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-slivers#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n        body: CustomScrollView(  \n          slivers: &lt;Widget>&#91;  \n            SliverAppBar(  \n              actions: &lt;Widget>&#91;  \n                Icon(Icons.camera_front, size: 40,)  \n            ],  \n              title: Text(\"Sliver Example\"),  \n              leading: Icon(Icons.menu),  \n              backgroundColor: Colors.green,  \n              expandedHeight: 100.0,  \n              floating: true,  \n              pinned: true  \n            ),  \n            SliverFixedExtentList(  \n              itemExtent: 75,  \n              delegate: SliverChildListDelegate(&#91;  \n                Container(color: Colors.blue),  \n                Container(color: Colors.pink),  \n                Container(color: Colors.yellow),  \n              ]),  \n            ),  \n            SliverToBoxAdapter(  \n              child: Container(  \n                color: Colors.orange,  \n                padding: const EdgeInsets.all(16.0),  \n                child: Text('Sliver Grid Header', style: TextStyle(fontSize: 28)),  \n              ),  \n            ),  \n          ],  \n        ),  \n      ),  \n    );  \n  }  \n}<\/code><\/pre>\n\n\n\n<p><strong>Output<\/strong><\/p>\n\n\n\n<p>When we run the app, we should get the UI of the screen similar to the below screenshot:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-slivers4.png\" alt=\"Flutter Slivers\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Sliver is a portion of the scrollable area which is used to achieve a custom scrolling effect. In other words, the sliver widget is a slice of the viewport. We can implement all of the scrollable views, such as ListView, GridView using slivers. It is a lower-level interface that provides excellent control over implementing a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[599],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2121"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2121"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2121\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}