Folding Cell offer more content on a list view by providing a detail section as inner Widget. We need not worry about create another widget for this, the pub.dev community have already made one for all of us ( Flutterians).
SimpleFoldingCell
dependencies:
flutter:
sdk: flutter
folding_cell: "^1.0.0"
and import the package as follows
import 'package:folding_cell/folding_cell/widget.dart';
The SimpleFoldingCell come with Create method which will configure the folding with frontWidget , innerWidget, cellSize, animationDuration etc. You have to do build widgets for the front and inner part of the folding and the rest will take care by the FoldingCell widget.
Here is the code for our front and inner widgets
FrontWidget
Widget _buildFrontWidget(var box, int key) {
if (box.monId == null) {
isCloud = false;
} else {
isCloud = true;
}
return Builder(
builder: (BuildContext context) {
return GestureDetector(
onTap: () {
final foldingCellState =
context.findAncestorStateOfType<SimpleFoldingCellState>();
foldingCellState?.toggleFold();
},
child: Container(
color: Color(0xffc1e0f4),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(
Icons.rate_review,
size: 30,
color: Colors.blue,
),
SizedBox(
width: 15,
),
Text(
box.projectName,
style: TextStyle(fontSize: 18),
),
SizedBox(
height: 15,
),
(isCloud
? Icon(Icons.cloud_circle)
: Icon(Icons.cloud_off)),
SizedBox(
height: 15,
),
GestureDetector(
onTap: () {
try {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => (UpdateProject(
project: box,
boxkey: key,
))));
} on Exception catch (e) {
// TODO
}
},
child: Icon(
Icons.mode_edit,
size: 30,
color: Colors.blue,
),
),
],
),
),
),
));
},
);
}
Folding and Unfolding
Folding Cell package in Flutter
toggleFold() is responsible for opening and closing of the detail page. So use it with appropriate event handler. In this example ,I used GestureDetector widget which enable some event handling capability to the container.
InnerWidget / detail widget
Widget _buildInnerWidget(var box) {
return Builder(
builder: (context) {
return GestureDetector(
onTap: () {
final foldingCellState =
context.findAncestorStateOfType<SimpleFoldingCellState>();
foldingCellState?.toggleFold();
},
child: Container(
color: Colors.blueAccent,
padding: EdgeInsets.only(top: 10),
child: Column(
children: [
ColoredBox(
color: Colors.redAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Tooltip(
message: 'Project Name and Description',
child: Icon(Icons.layers)),
Text(
box.projectName,
style: TextStyle(fontSize: 18, color: Colors.white),
)
],
),
),
Align(
alignment: Alignment.center,
child: Text(
box.projectDesc,
style: TextStyle(fontSize: 18, color: Colors.yellowAccent),
),
),
Container(
color: Colors.lightGreen,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Tooltip(
message: 'Assigned Person',
child: Icon(
Icons.people_outline,
size: 25,
)),
Tooltip(
message: 'Commence Date',
child: Icon(Icons.date_range, size: 25)),
Tooltip(
message: 'Completion Date(Expected)',
child: Icon(Icons.system_update, size: 25)),
Tooltip(
message: 'Project Modules',
child: Icon(Icons.layers, size: 25)),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
box.projectAsTo,
style: TextStyle(fontSize: 18, color: Colors.white),
),
Text(
formatDate(box.projectAsDate, [dd, '/', mm, '/', yy]),
style: TextStyle(fontSize: 18, color: Colors.white),
),
Text(
formatDate(box.projectECDate, [dd, '/', mm, '/', yy]),
style: TextStyle(fontSize: 18, color: Colors.white),
),
Text(
box.projectModule,
style: TextStyle(fontSize: 18, color: Colors.white),
),
],
),
Container(
color: Colors.black87,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
box.projectStatus,
style: TextStyle(fontSize: 15, color: Colors.white),
),
],
),
),
],
),
),
);
},
);
}
The complete project was included as project to the blog as Project Planner. Explore it for complete understanding and ask me if you don’t get it.
Itembuilder that return a FoldingCell
child: ListView.builder(
itemCount: keys.length,
itemBuilder: (_, index) {
final int key = keys[index];
final Project project = projectBox.get(key);
return SimpleFoldingCell.create(
frontWidget: _buildFrontWidget(project, key),
innerWidget: _buildInnerWidget(project),
cellSize: Size(
MediaQuery.of(context).size.width, 60),
animationDuration:
Duration(milliseconds: 300),
borderRadius: 5,
onOpen: () => print('$index cell opened'),
onClose: () => print('$index cell closed'),
);}),
That is all you need to learn about the folding cell. for more documentation . Folding cell can be coupled with not only ListView but along with any widget like container or a box where it serve its purpose.
