GF Bottomsheet

GF Bottomsheet Info

Usage

The simple code of a basic GFBottomsheet is as shown below.

Basic GF Bottomsheet

final GFBottomSheetController _controller = GFBottomSheetController();

Scaffold(
  bottomSheet: GFBottomSheet(
    controller: _controller,
    maxContentHeight: 150,
    stickyHeaderHeight: 100,
    stickyHeader: Container(
      decoration: BoxDecoration(color: Colors.white,
          boxShadow: [BoxShadow(color: Colors.black45, blurRadius: 0)]
      ),
      child: const GFListTile(
        avatar: GFAvatar(
          backgroundImage: AssetImage('assets image here'),
        ),
        titleText: 'GetWidget',
        subtitleText: 'Open source UI library',
      ),
    ),
    contentBody: Container(
      height: 200,
      margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
      child: ListView(
        shrinkWrap: true,
        physics: const ScrollPhysics(),
        children: const [
          Center(
              child: Text(
                'Getwidget reduces your overall app development time to minimum 30% because of its pre-build clean UI widget that you can use in flutter app development. We have spent more than 1000+ hours to build this library to make flutter developer’s life easy.',
                style: TextStyle(
                    fontSize: 15, wordSpacing: 0.3, letterSpacing: 0.2),
              ))
        ],
      ),
    ),
    stickyFooter: Container(
      color: GFColors.SUCCESS,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(
            'Get in touch',
            style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: Colors.white),
          ),
          Text(
            'info@getwidget.dev',
            style: TextStyle(fontSize: 15, color: Colors.white),
          ),
        ],
      ),
    ),
    stickyFooterHeight: 50,
  ),
  floatingActionButton: FloatingActionButton(
      backgroundColor: GFColors.SUCCESS,
      child: _controller.isBottomSheetOpened ? Icon(Icons.keyboard_arrow_down):Icon(Icons.keyboard_arrow_up),
      onPressed: () {
        _controller.isBottomSheetOpened
            ? _controller.hideBottomSheet()
            : _controller.showBottomSheet();
      }
      ),
)

GF Bottomsheet with Expandable content

GF Bottomsheet allow user to expand content body to display the more content. The property enableExpandableContent on true state makes content body expandable.

final GFBottomSheetController _controller = GFBottomSheetController();

GFBottomSheet(
  controller: _controller,
  maxContentHeight: 300,
  enableExpandableContent: true,
  stickyHeaderHeight: 100,
  stickyHeader: Container(
    decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [BoxShadow(color: Colors.black45, blurRadius: 0)]),
    child: const GFListTile(
      avatar: GFAvatar(
        backgroundImage: AssetImage('asset image here'),
      ),
      titleText: 'Eva Mendez',
      subtitleText: '11 minutes ago',
    ),
  ),
  contentBody: SingleChildScrollView(
    child: Container(
      margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
      child: Column(
        children: [
          Container(
            margin: EdgeInsets.symmetric(horizontal: 15),
            child: Row(
              children: <Widget>[
                Container(
                  width: 30,
                  height: 30,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(50),
                      image: DecorationImage(
                          image: AssetImage(
                              'asset image here'))),
                ),
                Container(
                    margin: EdgeInsets.only(left: 6),
                    child: Text(
                      'Add to your story',
                      style: TextStyle(color: Colors.blue),
                    ))
              ],
            ),
          ),
          ListView.builder(
              physics: ScrollPhysics(),
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              itemCount: 3,
              itemBuilder: (BuildContext context, int index) {
                return SingleChildScrollView(
                    child: InkWell(
                  child: GFListTile(
                    avatar: GFAvatar(
                      backgroundImage:
                          AssetImage('asset image here'),
                      size: 20,
                    ),
                    subtitleText: 'John Mendez',
                    icon: Container(
                      width: 66,
                      height: 30,
                      child: GFButton(
                        onPressed: () {},
                        color: GFColors.PRIMARY,
                        child: Center(
                            child: Text(
                          'Send',
                          style: TextStyle(color: Colors.white),
                        )),
                      ),
                    ),
                  ),
                ));
              }),
        ],
      ),
    ),
  ),
),

Custom Properties

Look and feel of the GFBottomsheet can be customized using the GFBottomsheet properties.

minContentHeight	[minContentHeight] controls the minimum height of the content body. Content body with [minContentHeight] displays only when [enableExpandableContent] is false. It Must be greater or equal to 0. Default value is 0.
maxContentHeight	[maxContentHeight] controls the maximum height of the content body. It Must be greater or equal to 0. Default value is 300.
stickyHeader	[stickyHeader] is the header of GFBottomSheet. User can interact by swiping or tapping the [stickyHeader]
contentBody	[contentBody] is the body of GFBottomSheet. User can interact by swiping or tapping the [contentBody]
stickyFooter	[stickyFooter] is the footer of GFBottomSheet. User can interact by swiping or tapping the [stickyFooter]
stickyFooterHeight	[stickyFooterHeight] defines the height of GFBottomSheet's [stickyFooter]
stickyHeaderHeight	[stickyHeaderHeight] defines the height of GFBottomSheet's [stickyHeader]
elevation	[elevation] controls shadow below the GFBottomSheet material. Must be greater or equal to 0. Default value is 0.
enableExpandableContent	[enableExpandableContent] allows [contentBody] to expand. Default value is false.
controller	[controller] used to control GFBottomSheet behavior like hide/show
animationDuration	Defines the drag animation duration of the GFBottomSheet Default value is 300.