Introduction
The dismissible_page package allows you to create a page view with dismissible pages in Flutter. This guide will show you how to integrate and use this package to create a Dismissible Page View in your Flutter app.
Content
1.Add the dismissible_page dependency:
Open your pubspec.yaml file and add the dismissible_page dependency.
dependencies:
dismissible_page: ^latest_version
Run flutter pub get to install the package.
2.Import the package:
Import the dismissible_page package in your Dart file.
import 'package:dismissible_page/dismissible_page.dart';
3.Create a Dismissible Page View:
Use the DismissiblePageView widget to create a Dismissible Page View.
DismissiblePageView(
itemCount: 3, // Number of pages
itemBuilder: (context, index, animation) {
return Container(
color: Colors.blue[index * 100], // Example content
child: Center(
child: Text('Page $index'),
),
);
},
)
Customize the itemCount and itemBuilder parameters according to your requirements. The itemBuilder function is called to build each page in the Dismissible Page View.
4.Run the app:
Run your Flutter app to see the Dismissible Page View in action. You can swipe left or right to dismiss pages.
Sample Code
import 'package:dismissible_page/dismissible_page.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(debugShowCheckedModeBanner: false, home: SimpleExample()));
}
/// This is a basic usage of DismissiblePage
/// For more examples check the demo/folder
class SimpleExample extends StatelessWidget {
// static const imagePath = 'https://5.imimg.com/data5/IC/CD/MY-3979298/3d-home-wallpaper-500x500.jpg';
List<String> imagePath = [
'https://5.imimg.com/data5/IC/CD/MY-3979298/3d-home-wallpaper-500x500.jpg',
'https://m.media-amazon.com/images/I/61ueqI-j03L._AC_UF1000,1000_QL80_.jpg',
'https://rukminim2.flixcart.com/image/850/1000/kmkxbww0/sticker/r/u/l/medium-wall-wallpaper-blue-water-dew-drops-bubbles-modern-home-original-imagfg79zzm5jehp.jpeg?q=90&crop=false',
'https://myindianthings.com/cdn/shop/articles/a737358e3e7c255af247e36501d3f91b_1024x.jpg?v=1648543628'
// Add more image URLs here
];
SimpleExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.transparent,
elevation: 0,
title: Text('Dismissible Page View'),
titleTextStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(.85),
),
),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
child: ListView.builder(
itemCount: imagePath.length,
itemBuilder: (context, index) {
// String imagePath = 'yourImagePath$index'; // Replace with actual image path
return GestureDetector(
onTap: () {
// Use extension method to use [TransparentRoute]
// This will push page without route background
context.pushTransparentRoute(
SecondPage(imagePath: imagePath[index]),
);
},
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Hero(
tag: 'imageTag$index',
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.network(
imagePath[index],
fit: BoxFit.cover,
),
),
),
),
);
},
),
),
),
);
}
}
class SecondPage extends StatelessWidget {
final String imagePath;
const SecondPage({required this.imagePath});
@override
Widget build(BuildContext context) {
return DismissiblePage(
onDismissed: () => Navigator.of(context).pop(),
// Start of the optional properties
isFullScreen: false,
disabled: false,
minRadius: 10,
maxRadius: 10,
dragSensitivity: 1.0,
maxTransformValue: .8,
direction: DismissiblePageDismissDirection.multi,
backgroundColor: Colors.black,
onDragStart: () {
print('onDragStart');
},
onDragUpdate: (details) {
print(details);
},
dismissThresholds: {
DismissiblePageDismissDirection.vertical: .2,
},
minScale: .8,
startingOpacity: 1,
reverseDuration: const Duration(milliseconds: 250),
// End of the optional properties
child: Scaffold(
body: SingleChildScrollView(
// Expected result For ClampingScrollPhysics (https://user-images.githubusercontent.com/26390946/194924545-1712b63b-2a25-4182-b731-db49ecc50c23.mov)
// Expected result for BouncingScrollPhysics (https://user-images.githubusercontent.com/26390946/194924598-eb3d3d54-b1de-4ba1-a22a-52a08e3c25b3.mov)
physics: ClampingScrollPhysics(),
// physics: BouncingScrollPhysics(),
child: Column(
children: [
Hero(
tag: imagePath,
child: Image.network(imagePath, fit: BoxFit.cover),
),
...List.generate(20, (index) => index + 1).map((index) {
return Container(
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
decoration: BoxDecoration(
color: Color.fromARGB(143, 15, 9, 22), // Background color
borderRadius: BorderRadius.circular(12.0), // Rounded corners
),
padding: EdgeInsets.all(12.0),
child: Row(
children: [
CircleAvatar(
backgroundColor: Colors.white, // Avatar background color
child: Icon(Icons.person), // You can replace this with your avatar image
),
SizedBox(width: 12.0),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Demo Item $index',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Colors.white),
),
Text(
'Additional Text',
style: TextStyle(color: Colors.white),
),
],
),
),
],
),
);
}),
],
),
),
),
);
}
}
Output
Conclusion
By following these steps, you can easily integrate the dismissible_page package into your Flutter app and create a Dismissible Page View with dismissible pages. This allows you to implement a swipe-to-dismiss feature for pages in your app.
