draggable_bottom_sheet 0.0.1
draggable_bottom_sheet: ^0.0.1 copied to clipboard
A new Flutter package project.
DraggableBottomSheet #
This is a bottom sheet that is partially visible onto the screen and can be dragged from there into the screen to occupy the fullscreen.
Get Started #
Add dependencies
draggable_bottom_sheet:
import package
import 'package:draggable_bottom_sheet/draggable_bottom_sheet.dart';
Example #
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:draggable_bottom_sheet/draggable_bottom_sheet.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: DraggableBottomSheetExample(title: 'Draggable Bottom Sheet Example'),
debugShowCheckedModeBanner: false,
);
}
}
class DraggableBottomSheetExample extends StatelessWidget {
DraggableBottomSheetExample({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
List<IconData> icons = [Icons.ac_unit, Icons.account_balance, Icons.adb, Icons.add_photo_alternate, Icons.format_line_spacing];
return Scaffold(
body: DraggableBottomSheet(
backgroundWidget: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(title: Text(title), backgroundColor: Colors.deepOrange,),
body: Container(
height: 400,
child: ListView.separated(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.symmetric(vertical: 32),
itemCount: icons.length,
itemBuilder: (context, index) => Container(
width: MediaQuery.of(context).size.width * 0.7,
height: 200,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(20)
),
child: Icon(icons[index], color: Colors.white, size: 60,),
),
separatorBuilder: (context, index) => SizedBox(width: 10),
),
),
),
previewChild: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20))
),
child: Column(
children: <Widget>[
Container(
width: 40,
height: 6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10)
),
),
SizedBox(height: 8,),
Text('Drag Me', style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),),
SizedBox(height: 16,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: icons.map((icon){
return Container(
width: 50,
height: 50,
margin: EdgeInsets.only(right: 16),
child: Icon(icon, color: Colors.pink, size: 40,),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10)
),
);
}).toList()
)
],
),
),
expandedChild: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20))
),
child: Column(
children: <Widget>[
Icon(Icons.keyboard_arrow_down, size: 30, color: Colors.white,),
SizedBox(height: 8,),
Text('Hey...I\'m expanding!!!', style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),),
SizedBox(height: 16,),
Expanded(
child: GridView.builder(
itemCount: icons.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemBuilder: (context, index) => Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10)
),
child: Icon(icons[index], color: Colors.pink, size: 40,),
)
),
)
],
),
),
minExtent: 150,
maxExtent: MediaQuery.of(context).size.height * 0.8,
)
);
}
}
Arguments #
Description of DraggableBottomSheet arguments.
Argument | Value | Description |
---|---|---|
alignment | Alignment | Alignment of the sheet |
backgroundWidget | Widget | This widget will hide behind the sheet when expanded. |
blurBackground | Boolean | Whether to blur the background while sheet expnasion (true: modal-sheet, false: persistent-sheet) |
expandedChild | Widget | Child of expended sheet |
expansionExtent | Double | Extent from the min-height to change from previewChild to expandedChild |
maxEntent | Double | Max-extent for sheet expansion |
minEntent | Double | Min-extent for the sheet, also the original height of the sheet |
previewChild | Widget | Child to be displayed when sheet is not expended |
scrollDirection | Axis | Scroll direction of the sheet |