Snapping Sheet In Flutter
The flutter widget is built using a modern framework. It is like a reaction. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state. Flutter is a free and open-source tool to develop mobile, desktop, web applications with a single code base.
Hello friends, I will talk about my new blog on Snapping Sheet In Flutter. we will explore the Snapping Sheet In flutter using the snapping_sheet_package. With the help of the package, we can easily achieve the flutter snapping sheet. So let’s get started.
Table of Contents :
Snapping Sheet :
The Snapping Sheet Library provides a highly customizable sheet that goes to different vertical lines, in which we can make the sheet custom and change the size and color of the sheet; inside it, there are two types of the sheet below and sheetAbove widget inside which we can make the item Initializes so that the user can scroll the sheet from the top and bottom.
Attributes:
There are some attributes of the snapping sheet are:
- > sheetBelow: We use the sheetBelow widget to display any list below, which is the remaining space from the bottom to the bottom of the grabbing widget.
- > sheetAbove: We use the sheetAbove widget to display any list below, which is the remaining space from the top to the top of the grabbing widget.
- > grabbing: The grabbing widget is fixed between the sheetBelow and sheetAbove.
- > grabbingHeight: The grabbing height is used to increase and decrease grabbing height.
- > snapPositions: The snapPosition are used for different snap position of a sheet.n
Demo Module :
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies :
dependencies:
snapping_sheet: ^3.0.0+2
Step 2: Importing
import 'package:snapping_sheet/snapping_sheet.dart';
Step 3: Enable AndriodX
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called snapping_sheet_demo.dart inside the lib folder.
First of all, we have created a snap sheet demo screen in which two buttons are created, and clicking on each button will open a new page in which we have used the sheetBelow and sheetAbove widget inside the SnappingSheet. Let us understand this in detail.
CustomButton(
mainButtonText: 'Snapping Sheet Above',
callbackTertiary: () {
Navigator.of(context).pushNamed(RouteName.SnappingSheetAboveScreen);
},
color: Colors.green[200],
),
Now, we will deeply describe sheetBelow widget:
In the sheetBelow, we will add a list view builder, inside it, we will add some items; the list item has shown the image, title, and subtitle of the item. This item will scroll from the bottom to the top of the sheet
sheetBelow: SnappingSheetContent(
child: Container(
color: Colors.white,
child:ListView.builder(
itemCount:snappingBelowSheetModel.length,
scrollDirection:Axis.vertical,
shrinkWrap:true,
//physics:NeverScrollableScrollPhysics(),
itemBuilder:(BuildContext context,int index){
return _buildSnappingBelowSheetModel(snappingBelowSheetModel[index]);
}
),
),
heightBehavior: SnappingSheetHeight.fit()
),
In this SnappingSheet, we have used the sun position, which will take the content item of the sheetBelow to the snap position.
snapPositions: [
SnapPosition(
positionPixel: 25.0,
snappingCurve: Curves.elasticOut,
snappingDuration: Duration(milliseconds: 750)
),
SnapPosition(
positionFactor: 0.5,
snappingCurve: Curves.ease,
snappingDuration: Duration(milliseconds: 500)
),
],
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will deeply describe sheetAbove widget:
In sheetAbove, too, we will add a list view builder; inside it we will add some items. The list item shows the image, title, and subtitle of the item.
sheetAbove:SnappingSheetContent(
draggable:true,
child: ListView.builder(
itemCount:snappingBelowSheetModel.length,
scrollDirection:Axis.vertical,
shrinkWrap:true,
//physics:NeverScrollableScrollPhysics(),
itemBuilder:(BuildContext context,int index){
return _buildSnappingBelowSheetModel(snappingBelowSheetModel[index]);
}
),
heightBehavior: SnappingSheetHeight.fit()
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:snapping_sheet/snapping_sheet.dart';
import 'package:snnaping_sheet_demo/Constants/Constants.dart';
import 'package:snnaping_sheet_demo/model/snaping_below_sheet_model.dart';
import 'package:snnaping_sheet_demo/shared/default_grabbing.dart';
import 'package:snnaping_sheet_demo/themes/appthemes.dart';
import 'package:snnaping_sheet_demo/themes/device_size.dart';
import 'dart:math';
class SnappingSheetBelow extends StatefulWidget {
@override
_SnappingSheetBelowState createState() => _SnappingSheetBelowState();
}
class _SnappingSheetBelowState extends State<SnappingSheetBelow> {
List<SnappingBelowSheetModel>snappingBelowSheetModel;
@override
void initState() {
snappingBelowSheetModel=Constants.getTestPanelModel();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor:Colors.grey.shade50,
appBar:AppBar(
title:Text('Snapping Below Sheet Demo'),
),
body:SnappingSheet(
//lockOverflowDrag: true,
grabbingHeight:50,
grabbing:DefaultGrabbing(),
snapPositions: [
SnapPosition(
positionPixel: 25.0,
snappingCurve: Curves.elasticOut,
snappingDuration: Duration(milliseconds: 750)
),
SnapPosition(
positionFactor: 0.5,
snappingCurve: Curves.ease,
snappingDuration: Duration(milliseconds: 500)
),
],
sheetBelow: SnappingSheetContent(
child: Container(
color: Colors.white,
child:ListView.builder(
itemCount:snappingBelowSheetModel.length,
scrollDirection:Axis.vertical,
shrinkWrap:true,
itemBuilder:(BuildContext context,int index){
return _buildSnappingBelowSheetModel(snappingBelowSheetModel[index]);
}
),
),
heightBehavior: SnappingSheetHeight.fit()
),
),
);
}
Widget _buildSnappingBelowSheetModel(SnappingBelowSheetModel items) {
return Container(
height:DeviceSize.height(context)/10,
child:Card(
child:Padding(
padding:EdgeInsets.all(6),
child:Row(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
height:60,
width:60,
padding:EdgeInsets.all(5),
decoration:BoxDecoration(
borderRadius:BorderRadius.all
(Radius.circular(4)),
color:AppTheme.color1.withOpacity(0.2),
),
child:Image.asset(items.img),
),
SizedBox(width:10,),
Column(
crossAxisAlignment:CrossAxisAlignment.start,
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: [
Text(items.title,style:TextStyle
(fontSize:13,fontWeight:FontWeight.w700,),),
Text(items.subTitle,style:TextStyle
(fontSize:11,fontWeight:FontWeight.w700,
color:AppTheme.color1),),
],
),
],
),
Icon(Icons.arrow_forward_ios,size:15,color:AppTheme.color2.withOpacity(0.8),)
],
),
),
),
);
}
}
Conclusion:
In this article, I have explained a Snapping Sheet in a flutter, which you can modify and experiment with according to your own. This little introduction was from the Snapping Sheet from our side.
I hope this blog will provide you with sufficient information in Trying up the Snapping Sheet in your flutter project. We will show you the Snapping Sheet is? and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
