Introduction:
Creating visually engaging and interactive user interfaces is a key aspect of modern app development. Flutter, the popular cross-platform framework, provides a range of powerful widgets and features to help developers achieve stunning UI effects. One such feature is the Collapsing Toolbar, implemented using the Sliver App Bar. In this blog post, we will dive into the world of Collapsing Toolbars in Flutter, exploring their functionality and providing examples along the way.
Understanding Sliver Widgets:
In Flutter, the concept of Slivers is central to building flexible and dynamic UIs. Sliver widgets are highly optimized and offer smooth scrolling performance. The Sliver App Bar is one such widget that allows you to create a collapsible toolbar that adjusts its size based on scrolling behavior.
Example:
CustomScrollView(
slivers: [
SliverAppBar(
title: Text('My Collapsing Toolbar'),
expandedHeight: 200,
flexibleSpace: Image.asset(
'assets/header_image.jpg',
fit: BoxFit.cover,
),
),
// Add additional sliver widgets or content here
],
)
Demo
Customizing the Collapsing Toolbar:
The Sliver App Bar provides various properties to customize the appearance and behavior of the Collapsing Toolbar. You can control the height of the expanded and collapsed states, add a background image or color, and even adjust the behavior of the toolbar's title.
Example:
SliverAppBar(
title: Text('My Collapsing Toolbar'),
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset(
'assets/header_image.jpg',
fit: BoxFit.cover,
),
),
floating: true,
snap: true,
)
Adding Scroll Effects and Actions:
Collapsing Toolbars often incorporate additional scroll effects and actions to enhance the user experience. Flutter allows you to add parallax effects, floating buttons, and even interactive widgets within the toolbar to provide a seamless and engaging UI.
Example:
SliverAppBar(
title: Text('My Collapsing Toolbar'),
expandedHeight: 200,
flexibleSpace: Stack(
children: [
Positioned.fill(
child: Image.asset(
'assets/header_image.jpg',
fit: BoxFit.cover,
),
),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
onPressed: () {
// Implement your action here
},
child: Icon(Icons.add),
),
),
],
),
floating: true,
snap: true,
)
Complete Source Code : ( detailspage.dart)
import 'package:flutter/material.dart';
import 'package:online_cource_app/app_colors.dart';
import 'package:online_cource_app/detailsappbar.dart';
class DetailsPage extends StatelessWidget {
final List<Map<String, dynamic>> playlist = [
{
'title': 'Intro to the Design',
'duration': '3:45',
},
{
'title': ' Perfect Wireframe Design',
'duration': '4:18',
},
{
'title': ' Colour Theory',
'duration': '2:55',
},
// Add more songs to the playlist
];
DetailsPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 200,
floating: false,
pinned: true,
iconTheme: const IconThemeData(color: Colors.white),
flexibleSpace: FlexibleSpaceBar(
title: const Text(
'Design Fundamentals',
style: TextStyle(color: Colors.white),
),
background: Image.asset(
'assets/ai.jpg',
fit: BoxFit.cover,
),
),
),
// Add additional sliver widgets or content here
SliverFillRemaining(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(34),
),
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Design Fundamentals',
style: TextStyle(
color: Colors.black,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(
height: 10,
),
const Row(
children: [
Icon(
Icons.person,
color: Color.fromARGB(255, 15, 38, 186),
),
SizedBox(
width: 8,
),
Text(
'John Due',
maxLines: 2,
style: TextStyle(
fontSize: 16.0,
color: Color.fromARGB(255, 15, 38, 186),
fontWeight: FontWeight.w500,
),
),
SizedBox(
width: 8,
),
Icon(
Icons.star,
color: Colors.amberAccent,
),
SizedBox(
width: 8,
),
Text(
'4.5',
style: TextStyle(
fontSize: 16.0,
color: Colors.black54,
fontWeight: FontWeight.bold,
),
),
],
),
const SizedBox(height: 16),
const Text(
'Our online tutoring program uses a flexible approach to develop skills based on individual talents Online Course for You',
style: TextStyle(
color: Colors.black38,
fontSize: 16,
fontWeight: FontWeight.w500),
textAlign: TextAlign.justify,
),
SizedBox(
height: 300,
child: ListView.builder(
itemCount: playlist.length,
itemBuilder: (context, index) {
final song = playlist[index];
return ListTile(
leading: const Icon(
Icons.play_circle_filled,
color: AppColors.accentColor,
size: 48,
),
title: Text(song['title']),
trailing: Text(song['duration']),
);
},
),
),
],
),
),
)
],
),
bottomNavigationBar: SafeArea(
child: SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailsScreen()),
);
},
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.buttonPrimary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
8.0), // Adjust the border radius as desired
),
padding: const EdgeInsets.symmetric(
horizontal: 16.0, vertical: 12.0),
),
child: const Text(
'Enroll Now',
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
),
),
),
);
}
}
Video Demo :
Conclusion:
The Collapsing Toolbar, powered by the Sliver App Bar, is a powerful tool in Flutter for creating dynamic and engaging UIs. By leveraging the flexible nature of Sliver widgets, you can build visually captivating app bars that adjust their size based on user interaction and scrolling behavior. With customizable properties and the ability to incorporate scroll effects and actions, Collapsing Toolbars offer endless possibilities for creating immersive user experiences. So go ahead, explore the Collapsing Toolbar in Flutter, and take your UI designs to new heights!
