Open In App

Flutter – Folding Cell Widget

Improve
Improve
Like Article
Like
Save
Share
Report

Folding Cell is the Flutter Widget that can be fold and unfold, It uses the frontWidget to show the front data, and the innerWidget to show the hidden data. Hidden is shown when the Folding cell is unfolded. When the widget is unfolded the innerWidget renders its data. When the widget is folded the frontWidget renders its data. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package in the pubspec.yaml File

Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder.

From the command line:

Dart




flutter pub add folding_cell


This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get)

 

Alternatively, your editor might support flutter pub get.

Step 3: Assign the Container to the body of the Scaffold, and use the simpleFoldingWidget as a child of the container. SingleFoldingCell allow us to set the parameters such as frontWidget, innerWidget, cellSize, animationDuration, borderradius, onOpen, onClose.

Dart




SimpleFoldingCell.create(
          key: _foldingCellKey,
          frontWidget: _buildFrontWidget(),
          innerWidget: _buildInnerWidget(),
          cellSize: Size(MediaQuery.of(context).size.width, 140),
          padding: EdgeInsets.all(15),
          animationDuration: Duration(milliseconds: 300),
          borderRadius: 10,
          onOpen: (){},
          onClose: (){},
        ),


Code Example

Dart




import 'package:flutter/material.dart';
import 'package:folding_cell/folding_cell.dart';
  
void main() {
  runApp(MaterialApp(
    home: RunMyApp(),
    debugShowCheckedModeBanner: false,
    title: 'FoldingCell',
    theme: ThemeData(primarySwatch: Colors.green),
  ));
}
  
class RunMyApp extends StatelessWidget {
  final _foldingCellKey = GlobalKey<SimpleFoldingCellState>();
  
  RunMyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter - Folding Cell"),
      ),
      body: Container(
        color: Color.fromARGB(255, 235, 225, 228),
        alignment: Alignment.topCenter,
        child: SimpleFoldingCell.create(
          key: _foldingCellKey,
          frontWidget: _buildFrontWidget(),
          innerWidget: _buildInnerWidget(),
          cellSize: Size(MediaQuery.of(context).size.width, 140),
          padding: EdgeInsets.all(15),
          animationDuration: Duration(milliseconds: 300),
          borderRadius: 10,
          onOpen: () => print('cell opened'),
          onClose: () => print('cell closed'),
        ),
      ),
    );
  }
  
  Widget _buildFrontWidget() {
    return Container(
      color: Color.fromARGB(255, 6, 144, 43),
      alignment: Alignment.center,
      child: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: Text(
              "Geeks For Geeks",
              style: TextStyle(
                color: Colors.black45,
                fontSize: 40,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Positioned(
            right: 10,
            bottom: 10,
            child: TextButton(
              onPressed: () => _foldingCellKey.currentState?.toggleFold(),
              child: Text(
                "OPEN",
              ),
              style: TextButton.styleFrom(
                backgroundColor: Colors.white,
                minimumSize: Size(80, 40),
              ),
            ),
          )
        ],
      ),
    );
  }
  
  Widget _buildInnerWidget() {
    return Container(
      color: Color.fromARGB(255, 144, 189, 241),
      padding: EdgeInsets.only(top: 10),
      child: Stack(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Text(
              "Geeks For Geeks",
              style: TextStyle(
                color: Colors.black45,
                fontSize: 40,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: Text(
              "Hello, How are you",
              style: TextStyle(
                color: Colors.black45,
                fontSize: 40,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Positioned(
            right: 10,
            bottom: 10,
            child: TextButton(
              onPressed: () => _foldingCellKey.currentState?.toggleFold(),
              child: Text(
                "Close",
              ),
              style: TextButton.styleFrom(
                backgroundColor: Colors.white,
                minimumSize: Size(80, 40),
              ),
            ),
          ),
        ],
      ),
    );
  }
}


Output:



Last Updated : 31 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads