holy_sheet 0.0.3
holy_sheet #
A Flutter sheet & panel widget that's good as hell.
Use it to build something like:
- Spotify's currently playing sheet
- Material Bottom Sheet, but from the top of the screen
- Apple's NFC / Apple Pay modals
- Google Maps' scrollable detail views
HolySheet respects the following conventions:
- The sheet is always modal.
- The sheet is always draggable.
- The sheet passes its constraints to its child, which it then (by default) translates with a custom layout.
- The sheet expects that all scrollable areas within itself respect the gesture arena and declare defeat when reasonable.
TODO #
- simple methods for controlling the sheet using a non-sibling gesture recognizer
- i.e., making the background of the modal draggable
- make sure it handles google maps-style cascading
Install #
dependencies:
holy_sheet: ^0.0.1
Usage #
import 'package:holy_sheet/holy_sheet.dart';
// see exampe/lib/main.dart for details
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _opacity;
@override
void initState() {
super.initState();
_controller = Harusaki.controller(
Harusaki.normal,
value: 1.0,
vsync: this,
);
_opacity = Tween<double>(begin: 0, end: 1).animate(_controller);
}
@override
Widget build(BuildContext context) {
final padding = MediaQuery.of(context).padding.top;
final headerHeight = padding + kToolbarHeight;
final contentHeight = MediaQuery.of(context).size.height - kToolbarHeight - headerHeight;
final _height = Tween<double>(
begin: headerHeight,
end: headerHeight + contentHeight,
);
return Stack(
children: <Widget>[
// the background
Container(
color: Colors.yellow,
),
// the darkening background
FadeTransition(
opacity: _opacity,
child: Container(
color: Colors.black45,
),
),
// the sheet layer
HolySheet(
// use the `.normal` SpringDescription
description: Harusaki.normal,
// descend from the top
riseFrom: RiseFrom.Heaven,
animationController: _controller,
// a custom animation for entrance/exit
animationBuilder: (context, child) {
return Align(
alignment: Alignment.topCenter,
child: SizedBox(
height: _height.transform(_controller.value).clamp(0.0, double.infinity),
child: child,
),
);
},
// the contents of the sheet
builder: (context) {
// a simple layout for showing the different layers
// it uses a Material as the primary background
return Material(
elevation: 1,
color: Theme.of(context).bottomSheetTheme.backgroundColor,
// then clips the content within an overflow box
child: ClipRect(
child: OverflowBox(
minHeight: headerHeight,
maxHeight: headerHeight + contentHeight,
alignment: Alignment.topCenter,
// which is a purple back layer
child: Container(
color: Colors.purple,
child: Column(
// and some simple containers that illustrate the dimensions of the device
children: <Widget>[
Container(color: Colors.red, height: padding),
Container(color: Colors.blue, height: kToolbarHeight),
],
),
),
),
),
);
},
),
],
);
}
}
[0.0.3]
- fix: handle case where child height is 0, breaking math
[0.0.2]
- add travelDistance prop, clarify onDrag calculations
[0.0.1]
- initial implementation, see README.md
example #
A new Flutter project.
Getting Started #
This project is a starting point for a Flutter application.
A few resources to get you started if this is your first Flutter project:
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
holy_sheet: ^0.0.3
2. Install it
You can install packages from the command line:
with Flutter:
$ flutter pub get
Alternatively, your editor might support flutter pub get
.
Check the docs for your editor to learn more.
3. Import it
Now in your Dart code, you can use:
import 'package:holy_sheet/holy_sheet.dart';
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
26
|
Health:
Code health derived from static analysis.
[more]
|
100
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
81
|
Overall:
Weighted score of the above.
[more]
|
59
|
We analyzed this package on Dec 13, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.6.1
- pana: 0.13.1+4
- Flutter: 1.12.13+hotfix.2
Health suggestions
Format lib/holy_sheet.dart
.
Run flutter format
to format lib/holy_sheet.dart
.
Maintenance suggestions
Package is pre-v0.1 release. (-10 points)
While nothing is inherently wrong with versions of 0.0.*
, it might mean that the author is still experimenting with the general direction of the API.
The package description is too short. (-9 points)
Add more detail to the description
field of pubspec.yaml
. Use 60 to 180 characters to describe the package, what it does, and its target use case.
Dependencies
Package | Constraint | Resolved | Available |
---|---|---|---|
Direct dependencies | |||
Dart SDK | >=2.1.0 <3.0.0 | ||
flutter | 0.0.0 | ||
Transitive dependencies | |||
collection | 1.14.11 | 1.14.12 | |
meta | 1.1.8 | ||
sky_engine | 0.0.99 | ||
typed_data | 1.1.6 | ||
vector_math | 2.0.8 | ||
Dev dependencies | |||
flutter_test |