Flutter widget of the day : Animated Folding Cell


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

To use the widget you need to add the dependency and import the package in dart file we want to use it.

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 click here. Folding cell can be coupled with not only ListView but along with any widget like container or a box where it serve its purpose.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.