Flutter: create custom scroll view animation An Image Into an App Bar
Flutter
Appbar is basically a pre built widget inside Scaffold class which is placed as a fixed-height widget at the top of the screen. For scrollable appbar we use a SliverAppBar which embeds an appbar in a sliver for use in a CustomScrollView
SliverAppBar Class
It is an appbar that can be integrated with a CustomScrollView. SliverAppBar is mostly used as a first child of CustomScrollView, which allows the appbar to integrate with a scrolling effect so that it can vary its height up to a certain expandable limit.
CustomScrollView:
Let’s, not bit get confused about CustomScrollView. It is basically a scroll view that creates custom scroll effects using slivers. It provides you with slivers to create various scrolling effects, such as lists and a grid with SliverList and SliverGrid.
Introduction to Slivers
As previously stated, a Sliver is a portion of a scrollable area that can be used inside a CustomScrollView. There are numerous Slivers available, and we’ll select a few to demonstrate how to use them later.
- SliverAppBar: This sliver renders an app bar, and it is one of the most commonly used sliver widgets that creates collapsible
AppBarsby setting both theflexibleSpaceandexpandedHeightparameters - SliverList: A sliver that renders a list in a linear array along the ScrollView’s main axis. To build list items as they scroll into view, SliverList accepts a delegate parameter. A
SliverChildListDelegatespecifies the fixed list of children that are created all at once, whereas aSliverChildBuilderDelegatespecifies how they are built lazily - SliverFixedExtentList: SliverFixedExtentList is identical to SliverList, with the exception that SliverFixedExtentList guarantees that all list items will have the same size on the main axis (i.e., equal height on a vertical scrolling list or equal width on a horizontal scrolling list). This has a significant impact on the performance of the ListView when scrolling because knowing the size of the items before loading them is quite beneficial when you wish to jump a long distance. For example, if we know each item is fixed at 50px tall and we want to scroll 5,000px down, we can easily leap 100 things by loading the 101st item and displaying it
- SliverGrid: SliverGrid is a sliver that displays a 2D array of children in a ScrollView. It accepts children via a delegate or an explicit list, and it also defines
gridDelegate, which determines the location of the children widget within the grid - SliverPadding: A sliver that creates empty space around another sliver. The only difference between it and the Padding widget is that it generates RenderSliver rather than RenderBox, so that it can be used inside CustomScrollView
- SliverToBoxAdapter: A sliver that allows you to warp any other widget that isn’t a Sliver and use it inside CustomScrollView; this is a very useful sliver for creating intricate scrolling screens with various widgets
- SliverOpacity: A sliver widget that makes its sliver child partially transparent. It is an easy-to-use replacement to the Opacity widget, just like SliverPadding
Start by creating a new Flutter project in either of VS Code or Android Studio. Replace the Flutter default counter application in main.dart with your own stateful widget.
You should have something like this:
import 'package:flutter/material.dart';
import 'package:scrollviewcustom/screen/home/home.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}Before Create Home stateful widget create home.dart file in home folder, then inside of it with the following code:
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scrollbar(
child: CustomScrollView(
slivers: [
SliverAppBar(
flexibleSpace: FlexibleSpaceBar(background: Image.asset("assets/images/bg.jpg", fit: BoxFit.cover)),
pinned: true,
automaticallyImplyLeading: false,
backgroundColor: Colors.pink,
expandedHeight: MediaQuery.of(context).size.height * 0.35,
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(quarterTurns: 0, child: IconButton( icon: Icon(Icons.arrow_back_rounded, color: Colors.white), onPressed: () =>{},));
},
),
title: Text("User Name", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
elevation: 0,
),
SliverList(
delegate: SliverChildListDelegate(
[
Container(
width: double.infinity,
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height -(MediaQuery.of(context).size.height *0.35),
minWidth: double.infinity,
maxHeight: double.infinity
),
padding: const EdgeInsets.only(top: 0, right: 10, left: 10),
child: SingleChildScrollView(
child: ListView(
physics: const ClampingScrollPhysics(),
shrinkWrap: true,
children: <Widget>[
ListTile(
title: Text("Profile name", style: TextStyle(fontSize: 18, color: Colors.black, fontWeight: FontWeight.w600)),
subtitle: Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
, style: TextStyle(fontSize: 14, color: Colors.black54),),
)
],
),
),
)
]
)
)
],
),
)
);
}
}
Output:
Flutter
