# 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. |