{"id":7374,"date":"2020-12-30T10:26:57","date_gmt":"2020-12-30T10:26:57","guid":{"rendered":"https:\/\/www.getwidget.dev\/blogs\/flutter-bottomsheet-widget\/"},"modified":"2024-11-21T11:19:17","modified_gmt":"2024-11-21T11:19:17","slug":"flutter-bottomsheet-widget","status":"publish","type":"post","link":"https:\/\/www.getwidget.dev\/blog\/flutter-bottomsheet-widget\/","title":{"rendered":"Flutter Bottom Sheet &#8211; A widget that is an alternative to the dialog that pops from the bottom of the screen."},"content":{"rendered":"<p>A Flutter Bottom Sheet is a Flutter material widget that slides up from the bottom edge of the mobile screen and is an alternative to the modal or popups. It also can show different components by swiping up. The sheet hosts many other widgets inside it.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Flutter-BottomSheet-Dialog-With-GFWidget.png\" class=\"kg-image lazyload\" alt=\"Bottom Sheet\" loading=\"lazy\" width=\"505\" height=\"485\"><noscript><img decoding=\"async\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Flutter-BottomSheet-Dialog-With-GFWidget.png\" class=\"kg-image lazyload\" alt=\"Bottom Sheet\" loading=\"lazy\" width=\"505\" height=\"485\"><\/noscript><\/figure>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-bottomsheet-widget\/#flutter-bottom-sheet-modal\" >Flutter Bottom Sheet Modal<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-bottomsheet-widget\/#how-to-create-a-flutter-bottom-sheet-widget\" >How to create a Flutter Bottom Sheet widget?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-bottomsheet-widget\/#what-is-a-persistent-bottom-sheet\" >What is a Persistent Bottom Sheet?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.getwidget.dev\/blog\/flutter-bottomsheet-widget\/#what-are-the-customizable-properties-used-in-flutter-bottom-sheet\" >What are the customizable properties used in Flutter Bottom Sheet?<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"flutter-bottom-sheet-modal\"><span class=\"ez-toc-section\" id=\"flutter-bottom-sheet-modal\"><\/span>Flutter Bottom Sheet Modal<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Flutter Bottom Sheet<\/strong> behavior can be applied to a child of <a href=\"https:\/\/developer.android.com\/reference\/androidx\/coordinatorlayout\/widget\/CoordinatorLayout\/\" target=\"_blank\" rel=\"noopener\">Coordinator Layout<\/a> to make that child a persistent bottom sheet. Persistent bottom sheets are views that come up from the bottom of the screen and overlap over the main widget. we can drag vertically to expose more or less of their content.<\/p>\n<blockquote><p><em>Now here is i am going to talk about what is <strong>GetWidget<\/strong> Bottom Sheet and how we implement this on Flutter app to build awesome Flutter Bottom Sheet for an app.<\/em><\/p><\/blockquote>\n<h3 id=\"how-to-start\">How to Start:<\/h3>\n<p>Now here is the guide about how we should start developing the <strong>GF <a href=\"https:\/\/docs.getwidget.dev\/gf-bottom-sheet\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Bottomsheet<\/strong><\/a> <\/strong>Widget with the use of the <strong>GetWidget<\/strong> UI Library.<\/p>\n<p><strong>Getwidget <a href=\"https:\/\/docs.getwidget.dev\/getting-started\/\" target=\"_blank\" rel=\"noopener\"><strong>Getting Started<\/strong><\/a><\/strong> will guide you on how to start building a beautiful flutter application with the <strong>GetWidget<\/strong> UI library. You have to install the package from <strong>pub.dev<\/strong>, and import the package in your Flutter project.<\/p>\n<blockquote><p><em>Install Package from pub.dev :<\/em><\/p><\/blockquote>\n<p><a href=\"https:\/\/pub.dev\/packages\/getwidget\/\" target=\"_blank\" rel=\"noopener\"><strong>https:\/\/pub.dev\/packages\/getwidget<\/strong><\/a><\/p>\n<h3 id=\"import-full-package\">Import full package:<\/h3>\n<p>import &#8216;package:getwidget\/getwidget.dart&#8217;;<\/p>\n<p><strong>Note: dependencies: getwidget: ^ 4.0.0<\/strong><\/p>\n<blockquote><p><em>Keep playing with the pre-built UI components.\u200c<\/em><\/p><\/blockquote>\n<p>In the <strong>GFBottomSheet component<\/strong>, we have expandable content wherein we can expand the body or the content of the sheet according to our needs.<\/p>\n<p>In the below section let us see how to use the sheet in the application with other widgets inside it. <\/p>\n<h2 id=\"how-to-create-a-flutter-bottom-sheet-widget\"><span class=\"ez-toc-section\" id=\"how-to-create-a-flutter-bottom-sheet-widget\"><\/span>How to create a Flutter Bottom Sheet widget?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Flutter Bottom Sheet<\/strong> is a material widget that is used as a modal\/popup that slides from the bottom of the screen. When the bottom sheet is active, the other functions of the screen won&#8217;t be active to operate, in other words, it will be disabled until the bottom sheet is active on the screen.<\/p>\n<p><strong>Basic GFBottomsheet <\/strong>will slide up and down with a content body. The appearance of the GFBottomsheet can be customized using the GFBottomsheet properties. \u200c<\/p>\n<p>Here, we will be using the GetWidget library and its GFBottomSheet component that has many customization options to use and make the bottom sheet as per the user requirement.<\/p>\n<p><strong>GFBottomSheet<\/strong> is a <strong>Flutter Bottom Sheet<\/strong> that is a material widget that popups itself from the floor of the screen. When the bottom sheet is opened the other functions of the respective screen will not work and be static.<\/p>\n<p>Let us now see how the Flutter Bottom Sheet works with an example.<\/p>\n<p>We can use the given example code to build the <strong><em>Flutter Bottom Sheet<\/em><\/strong>.\u200c<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">final GFBottomSheetController _controller = GFBottomSheetController();\n\nScaffold(\n  bottomSheet: GFBottomSheet(\n    controller: _controller,\n    maxContentHeight: 150,\n    stickyHeaderHeight: 100,\n    stickyHeader: Container(\n      decoration: BoxDecoration(color: Colors.white,\n          boxShadow: [BoxShadow(color: Colors.black45, blurRadius: 0)]\n      ),\n      child: const GFListTile(\n        avatar: GFAvatar(\n          backgroundImage: AssetImage('assets image here'),\n        ),\n        titleText: 'Title',\n        subtitleText: 'Sub Title goes here',\n      ),\n    ),\n    contentBody: Container(\n      height: 200,\n      margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),\n      child: ListView(\n        shrinkWrap: true,\n        physics: const ScrollPhysics(),\n        children: const [\n          Center(\n              child: Text(\n                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ',\n                style: TextStyle(\n                    fontSize: 15, wordSpacing: 0.3, letterSpacing: 0.2),\n              ))\n        ],\n      ),\n    ),\n    stickyFooter: Container(\n      color: GFColors.SUCCESS,\n      child: Row(\n        mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n        children: [\n          Text(\n            'Call us',\n            style: TextStyle(\n                fontSize: 18,\n                fontWeight: FontWeight.bold,\n                color: Colors.white),\n          ),\n          Text(\n            'Email us',\n            style: TextStyle(fontSize: 15, color: Colors.white),\n          ),\n        ],\n      ),\n    ),\n    stickyFooterHeight: 50,\n  ),\n  floatingActionButton: FloatingActionButton(\n      backgroundColor: GFColors.SUCCESS,\n      child: _controller.isBottomSheetOpened ? Icon(Icons.keyboard_arrow_down):Icon(Icons.keyboard_arrow_up),\n      onPressed: () {\n        _controller.isBottomSheetOpened\n            ? _controller.hideBottomSheet()\n            : _controller.showBottomSheet();\n      }\n      ),\n)<\/code><\/pre><figcaption>\n<p><span style=\"white-space: pre-wrap;\">Flutter Bottom Sheet Modal Example code\u00a0<\/span><\/p>\n<\/figcaption><\/figure>\n<h3 id=\"gf-flutter-bottom-sheet-with-expandable-content\">GF Flutter Bottom Sheet with Expandable Content<\/h3>\n<p>GF Bottomsheet allows users to expand the content body to display more content. The user can decide on how much the content should be expanded according to the requirement. <\/p>\n<p>The below code shows how a bottom sheet in Flutter and its content can be expanded accordingly. <\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">final GFBottomSheetController _controller = GFBottomSheetController();\n\nGFBottomSheet(\n  controller: _controller,\n  maxContentHeight: 300,\n  enableExpandableContent: true,\n  stickyHeaderHeight: 100,\n  stickyHeader: Container(\n    decoration: BoxDecoration(\n        color: Colors.white,\n        boxShadow: [BoxShadow(color: Colors.black45, blurRadius: 0)]),\n    child: const GFListTile(\n      avatar: GFAvatar(\n        backgroundImage: AssetImage('asset image here'),\n      ),\n      titleText: 'Charles Aly',\n      subtitleText: '20 minutes ago',\n    ),\n  ),\n  contentBody: SingleChildScrollView(\n    child: Container(\n      margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),\n      child: Column(\n        children: [\n          Container(\n            margin: EdgeInsets.symmetric(horizontal: 15),\n            child: Row(\n              children: <Widget>[\n                Container(\n                  width: 30,\n                  height: 30,\n                  decoration: BoxDecoration(\n                      borderRadius: BorderRadius.circular(50),\n                      image: DecorationImage(\n                          image: AssetImage(\n                              'asset image here'))),\n                ),\n                Container(\n                    margin: EdgeInsets.only(left: 6),\n                    child: Text(\n                      'Add to your story',\n                      style: TextStyle(color: Colors.blue, fontSize: 15,\n                fontWeight: FontWeight.bold,),\n                    ))\n              ],\n            ),\n          ),\n          ListView.builder(\n              physics: ScrollPhysics(),\n              shrinkWrap: true,\n              scrollDirection: Axis.vertical,\n              itemCount: 3,\n              itemBuilder: (BuildContext context, int index) {\n                return SingleChildScrollView(\n                    child: InkWell(\n                  child: GFListTile(\n                    avatar: GFAvatar(\n                      backgroundImage:\n                          AssetImage('asset image here'),\n                      size: 20,\n                    ),\n                    subtitleText: 'Syam Aly',\n                    icon: Container(\n                      width: 66,\n                      height: 30,\n                      child: GFButton(\n                        onPressed: () {},\n                        color: GFColors.PRIMARY,\n                        child: Center(\n                            child: Text(\n                          'Send',\n                          style: TextStyle(color: Colors.white),\n                        )),\n                      ),\n                    ),\n                  ),\n                ));\n              }),\n        ],\n      ),\n    ),\n  ),\n),<\/code><\/pre><figcaption>\n<p><span style=\"white-space: pre-wrap;\">Flutter Bottomsheet with expanded content\u00a0<\/span><\/p>\n<\/figcaption><\/figure>\n<p>The look and feel of the <strong>GFBottomsheet<\/strong> can be customized using the GFBottomsheet custom properties to make it look more attractive to the user.<\/p>\n<table style=\"font-family: \"Nunito Sans\", sans-serif; border-collapse: collapse; margin: 1rem 0px; display: block; overflow-x: auto; color: rgb(44, 62, 80); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;\">\n<thead style=\"font-family: \"Nunito Sans\", sans-serif;\">\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229);\">\n<th style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">Name<\/th>\n<th style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody style=\"font-family: \"Nunito Sans\", sans-serif;\">\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229);\">\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\"><strong style=\"font-family: \"Nunito Sans\", sans-serif;\">minContentHeight<\/strong><\/td>\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">[minContentHeight] controls the minimum height of the content body.<\/p>\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">Content body with [minContentHeight] displays only when [enableExpandableContent] is false.<\/p>\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">It Must be greater or equal to 0. Default value is 0.<\/p>\n<\/td>\n<\/tr>\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229); background-color: rgb(246, 248, 250);\">\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\"><strong style=\"font-family: \"Nunito Sans\", sans-serif;\">maxContentHeight<\/strong><\/td>\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">[maxContentHeight] controls the maximum height of the content body.<\/p>\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">It Must be greater or equal to 0. Default value is 300.<\/p>\n<\/td>\n<\/tr>\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229);\">\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\"><strong style=\"font-family: \"Nunito Sans\", sans-serif;\">stickyHeader<\/strong><\/td>\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">[stickyHeader] is the header of GFBottomSheet.<\/p>\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">User can interact by swiping or tapping the [stickyHeader]<\/p>\n<\/td>\n<\/tr>\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229); background-color: rgb(246, 248, 250);\">\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\"><strong style=\"font-family: \"Nunito Sans\", sans-serif;\">contentBody<\/strong><\/td>\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">[contentBody] is the body of GFBottomSheet.<\/p>\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">User can interact by swiping or tapping the [contentBody]<\/p>\n<\/td>\n<\/tr>\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229);\">\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\"><strong style=\"font-family: \"Nunito Sans\", sans-serif;\">stickyFooter<\/strong><\/td>\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">[stickyFooter] is the footer of GFBottomSheet.<\/p>\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">User can interact by swiping or tapping the [stickyFooter]<\/p>\n<\/td>\n<\/tr>\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229); background-color: rgb(246, 248, 250);\">\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\"><strong style=\"font-family: \"Nunito Sans\", sans-serif;\">stickyFooterHeight<\/strong><\/td>\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">[stickyFooterHeight] defines the height of GFBottomSheet&#8217;s [stickyFooter]<\/td>\n<\/tr>\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229);\">\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\"><strong style=\"font-family: \"Nunito Sans\", sans-serif;\">stickyHeaderHeight<\/strong><\/td>\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">[stickyHeaderHeight] defines the height of GFBottomSheet&#8217;s [stickyHeader]<\/td>\n<\/tr>\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229); background-color: rgb(246, 248, 250);\">\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\"><strong style=\"font-family: \"Nunito Sans\", sans-serif;\">elevation<\/strong><\/td>\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">[elevation] controls shadow below the GFBottomSheet material.<\/p>\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">Must be greater or equal to 0. Default value is 0.<\/p>\n<\/td>\n<\/tr>\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229);\">\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\"><strong style=\"font-family: \"Nunito Sans\", sans-serif;\">enableExpandableContent<\/strong><\/td>\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">[enableExpandableContent] allows [contentBody] to expand.<\/p>\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">Default value is false.<\/p>\n<\/td>\n<\/tr>\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229); background-color: rgb(246, 248, 250);\">\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\"><strong style=\"font-family: \"Nunito Sans\", sans-serif;\">controller<\/strong><\/td>\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">[controller] used to control GFBottomSheet behavior like hide\/show<\/td>\n<\/tr>\n<tr style=\"font-family: \"Nunito Sans\", sans-serif; border-top: 1px solid rgb(223, 226, 229);\">\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\"><strong style=\"font-family: \"Nunito Sans\", sans-serif;\">animationDuration<\/strong><\/td>\n<td style=\"font-family: \"Nunito Sans\", sans-serif; border: 1px solid rgb(223, 226, 229); padding: 0.6em 1em; text-align: left;\">\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">Defines the drag animation duration of the GFBottomSheet<\/p>\n<p style=\"font-family: \"Nunito Sans\", sans-serif; line-height: 1.7;\">Default value is 300.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"what-is-a-persistent-bottom-sheet\"><span class=\"ez-toc-section\" id=\"what-is-a-persistent-bottom-sheet\"><\/span>What is a Persistent Bottom Sheet?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <strong>Persistent Bottom Sheet <\/strong>is a Flutter BottomSheet that is just like the other widgets on the same screen. As the name itself tells, that it is a constant or continuous widget that goes hand in hand with the actual UI section on the present respective screen. It is an interaction between the main UI block and the menu dialog, which both constitute the Persistent Bottom Sheet.<\/p>\n<h2 id=\"what-are-the-customizable-properties-used-in-flutter-bottom-sheet\"><span class=\"ez-toc-section\" id=\"what-are-the-customizable-properties-used-in-flutter-bottom-sheet\"><\/span>What are the customizable properties used in Flutter Bottom Sheet?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p> The customizable properties include the min-content height, max-content height, sticky header, sticky footer, content body, elevation, animation duration, sticky header height, sticky footer height of the Bottom Sheet component. Hence customizable properties are fully flexible. You can check out all custom properties on <a href=\"https:\/\/docs.getwidget.dev\/gf-bottom-sheet\/\" target=\"_blank\" rel=\"noopener\"><strong><em>GetWidget <\/em><em>Bottom Sheet Widget Properties<\/em><\/strong><\/a>.<\/p>\n<h3 id=\"can-we-expand-the-content-body\">Can we expand the content body?<\/h3>\n<p>Yes, we can expand the content body by enabling the property <code>enableExpandableContent<\/code> on <code>true<\/code> .<\/p>\n<p><a href=\"https:\/\/docs.getwidget.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Get Widget Docs<\/strong><\/a><\/p>\n<figure class=\"kg-card kg-bookmark-card\"><a class=\"kg-bookmark-container\" href=\"https:\/\/docs.getwidget.dev\/\" target=\"_blank\" rel=\"noopener\"><\/p>\n<div class=\"kg-bookmark-content\">\n<div class=\"kg-bookmark-title\">Flutter GetWidget Docs<\/div>\n<div class=\"kg-bookmark-description\">Get Widget is one of the largest Flutter open-source UI Kit libraries for mobile or web apps. It has more than 1000+ pre-built reusable widgets.<\/div>\n<div class=\"kg-bookmark-metadata\"><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\"><noscript><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\"><\/noscript><span class=\"kg-bookmark-author\">getwidget<\/span><span class=\"kg-bookmark-publisher\">getwidget<\/span><\/div>\n<\/div>\n<div class=\"kg-bookmark-thumbnail\"><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/docs\/tr:dpr-auto,tr:w-auto\/link-share_aT-cHzGY9.png\" alt=\"\"><noscript><img decoding=\"async\" class=\"lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/docs\/tr:dpr-auto,tr:w-auto\/link-share_aT-cHzGY9.png\" alt=\"\"><\/noscript><\/div>\n<p><\/a><\/figure>\n<p><a href=\"https:\/\/github.com\/ionicfirebaseapp\/getwidget\/\" target=\"_blank\" rel=\"noopener\"><strong>GitHub Repository<\/strong><\/a>: Please do appreciate our work through GitHub start<\/p>\n<h3 id=\"conclusion\">Conclusion:<\/h3>\n<p>Here we discussed, what <a href=\"https:\/\/docs.getwidget.dev\/gf-bottom-sheet\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter GFBottomSheet<\/strong><\/a> Widget is. And how we can use and implement it into our Flutter app through the <a href=\"https:\/\/www.getwidget.dev\/\" rel=\"noreferrer\"><strong>GetWidget<\/strong> <\/a><strong>GFBottomSheet <\/strong>component. Here, there are options to customize and use other types of <strong>GFBottomSheet<\/strong> <\/p>\n<h3 id=\"about-our-team\"><strong>About Our Team:<\/strong><\/h3>\n<p>We have been working on Flutter since Flutter launched in beta version in 2017. And our team has been putting hundreds and hundreds of hours into the experiment and implementation of Flutter. As well as After successfully delivering enterprise and SAAS applications that have been used by more than 500+ businesses around 119+ countries. Now we are in love with <a href=\"https:\/\/www.getwidget.dev\/hire-flutter-developer\" rel=\"noreferrer\"><strong>Flutter app development<\/strong><\/a><strong> <\/strong>and we are very passionate about Flutter development. Now it is something we trying to make a small contribution to the <a href=\"https:\/\/www.getwidget.dev\/\" rel=\"noreferrer\">Flutter Dev Community<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"A Flutter Bottom Sheet is a Flutter material widget that slides up from the bottom edge of the&hellip;","protected":false},"author":1,"featured_media":5218,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[139],"tags":[],"class_list":{"0":"post-7374","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-flutter","8":"cs-entry"},"_links":{"self":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/comments?post=7374"}],"version-history":[{"count":1,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7374\/revisions"}],"predecessor-version":[{"id":7927,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7374\/revisions\/7927"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/media\/5218"}],"wp:attachment":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/media?parent=7374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/categories?post=7374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/tags?post=7374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}