Folding Cell In Flutter
The animation is a complex strategy in any mobile application. Disregarding its complexity, Animation improves the user experience to another level and gives rich user interaction. Because of its extravagance, animation turns into a basic part of current mobile applications. Flutter framework perceives the significance of Animation and gives a straightforward and natural structure to build up a wide range of animations.
In this blog, we will explore the Folding Cell In Flutter. We will also implement a demo program and learn to create flutter folding cells using the folding_cell package in your flutter applications.
folding_cell | Flutter Package
Simple folding cell widget implemented in Flutter. It’s a widget so add it to any container widget as a child. Add…pub.dev
Table Of Contents::
Folding Cell:
Folding cells are the animations that appear as though a few animations when we open another/new folder, it would seem that the opened folder will be closed. Straightforward folding cell widget executed in Flutter. It’s a widget so add it to any container widget as a child.
Demo Module :
This demo video shows how to create a folding cell in a flutter. It shows how folding cells will work using the folding_cell package in your flutter applications. It shows folding cells are in listview and animations when we open a new folder and closed the opened folder. It will be shown on your device.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
google_fonts:
folding_cell:
Step 2: Import
import 'package:folding_cell/folding_cell.dart';
import 'package:google_fonts/google_fonts.dart';
Step 3: Run flutter packages get in the root directory of your app.
Step 4: Enable AndriodX
Add this to your gradle.properties file:
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 demo_screen.dart inside the lib folder.
List<TechnologyModel> _technologyList;
@override
void initState() {
// TODO: implement initState
super.initState();
_technologyList = [
TechnologyModel(title: "Application Development",
),
TechnologyModel(title: "Research & Development",
),
TechnologyModel(title: "Big Data & Analytics",
),
TechnologyModel(title: "Support Services",
),
TechnologyModel(title: "QA & Software Testing",
),
];
}
First, we will create a list _technologyList and define it on the initState() method.
Container(
child: ListView.builder(
itemCount: _technologyList.length,
itemBuilder: (context, index) {
return SimpleFoldingCell(
frontWidget: _buildFrontWidget(index),
innerTopWidget: _buildInnerWidget(index),
innerBottomWidget: _buildInnerBottomWidget(),
cellSize: Size(MediaQuery.of(context).size.width, 125),
padding: EdgeInsets.all(15),
animationDuration: Duration(milliseconds: 200),
borderRadius: 10,
onOpen: () => print('$index cell opened'),
onClose: () => print('$index cell closed'),
);
},
),
),
In the body, we will create a container, and inside add a ListView.builder(). In ListView.builder, add an itemCount means the length of our list and add itemBuilder. In itemBuilder, we will return SimpleFoldingCell(), and inside add frontWidget, innerTopWidget,and innerBottomWidget of the folding cell. We will add the _buildFrontWidget(index) method in the frontWidget, _buildInnerWidget(index) method in the innerTopWidget and _buildInnerBottomWidget() method in the innerBottomWidget, deeply define the below code. Also we add cellSize, animationDuration for folding cell.
First, we will define a frontWidget and for those we will create a _buildFrontWidget(index) method.
Widget _buildFrontWidget(int index) {
return Builder(
builder: (BuildContext context) {
return Container(
color: Colors.cyan[100],
alignment: Alignment.bottomCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Aeologic Technology",
style: GoogleFonts.aldrich(
color: Color(0xFF2e282a),
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10,),
FlatButton(
onPressed: () {
final foldingCellState = context
.findAncestorStateOfType<SimpleFoldingCellState> ();
foldingCellState?.toggleFold();
},
child: Text(
"OPEN",
),
textColor: Colors.white,
color: Colors.indigoAccent[100],
splashColor: Colors.white.withOpacity(0.5),
),
],
),
);
},
);
}
In this widget, we will create a container and inside add a column widget. In the column widget, we will create a text and a FlatButton. In FlatButton, we will add a text and onPressed method add an open function. When the user pressed the cell, then the folding cell will be open. Container alignment was bottomCenter and also add color. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will define an innerTopWidget and for those we will create a _buildInnerWidget(index) method.
Widget _buildInnerWidget(int index) {
return Builder(
builder: (context) {
return Container(
color: Colors.pink[100],
padding: EdgeInsets.only(top: 10),
child: Align(
alignment: Alignment.center,
child: Text(
_technologyList[index].title,
style: GoogleFonts.aldrich(
color: Colors.black,
fontSize: 20.0,
),
),
),
);
},
);
}
In this widget, we will return a container, add color for the user interaction, add a text, and wrap it to the align. The alignment was center. When the user opens the folding cell, the inner cell will be shown the top and center positions.
ow, we will define an innerBottomWidget and for those we will create a _buildInnerBottomWidget(), method.
Widget _buildInnerBottomWidget() {
return Builder(
builder: (context) {
return Container(
color: Colors.blueGrey[50],
alignment: Alignment.bottomCenter,
child: Padding(
padding: EdgeInsets.only(bottom: 10),
child: FlatButton(
onPressed: () {
final foldingCellState = context
.findAncestorStateOfType<SimpleFoldingCellState>();
foldingCellState?.toggleFold();
},
child: Text(
"Close",
),
textColor: Colors.white,
color: Colors.redAccent[100],
splashColor: Colors.white.withOpacity(0.5),
),
),
);
}
);
}
We will return a container in this widget, and inside add color, alignment was bottomCenter, and FlatButton. In this Flatbutton, we will add text and onPressed method add a close function. When the user taps the close button, the folding cell will be closed and back to the frontWidget. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
https://gist.github.com/ShaiqAhmedkhan/f5c1aea3e17a5402d7525fd9eb84efa1#file-demo_screen-dart
Conclusion:
In the article, I have explained the basic structure of Folding cells in a flutter; you can modify this code according to your choice. This was a small introduction to Folding Cell On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Folding Cell in your flutter projects. We will show you what the Folding Cell is?. Make a demo program for working Folding Cell and show the front, inner top, and inner bottom widget open and also shows folding cells are in listview and animations when we open a new folder and closed the opened folder 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.
find the source code of the Flutter Folding Cell Demo:
flutter-devs/flutter_folding_cell_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
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.
