bamboo 1.0.1 bamboo: ^1.0.1 copied to clipboard
Utilities that make it easy and fast to build adaptive apps for mobile, web, and beyond with Flutter.
Bamboo #
Utilities that make it easy and fast to build adaptive apps for mobile, web, and beyond with Flutter.
Getting started #
In the pubspec.yaml
of your flutter project, add the following dependency:
dependencies:
...
bamboo: <latest_version>
In your library add the following import:
import 'package:bamboo/bamboo.dart';
Wrap your MaterialApp or root widget with our inherited widget.By defualt we have a default breakpoint but you can define your own breakpoint using our inherited widget.
BambooBreakPoint(
mobile: 500,
child: MaterialApp(
....
),
)
Features ๐ #
Bamboo requires you to set a value for the mobile breakpoint. If you don't provide values for the others, it will automatically use the mobile as default for all the available breakpoints (desktop, tablet, large).
Bamboo Value #
A class that allows you to set widgets based on the breakpoint. You can use it in most cases, where ever you want to have an adaptive value.
Container(
child: Bamboo.value(
context: context,
mobile: const FlutterLogo(),
tablet: const Text("data"),
),
),
Bamboo number #
It works just like Bamboo Value
but this goes with everything numbers. It allows you to specify the unit you would like to use. Currently, we support only, p
, vmin
, vmax
, vw
, vh
, and px
.
Container(
height: Bamboo.number(
context: context,
mobile: 20,
tablet: 50,
unit: Unit.vh,
),
),
BambooWidget #
A responsive widget that allows you to define widgets based on the current breakpoint. When you don't set the breakpoint for desktop, tablet, and large, it will automatically use the mobile breakpoint.
BambooWidget(
mobile: Container(),
tablet: const Text(''),
desktop: const FlutterLogo(),
)
BambooImage #
BambooImage image allows you to specify multiple Image path which shows based on the current breakpoint.
BambooImage(
builder: (BuildContext context, imagePath) {
return Image.asset(imagePath);
},
mobile: 'assets/images/logo2x.png',
tablet: 'assets/images/logo3x.png',
desktop: 'assets/images/logo4x.png',
)
BambooHidden #
BambooHidden hide/display specify widget based on the current breakpoint.
const BambooHidden(
desktop: true,
tablet: false,
mobile: false,
large: false,
child: Text(''),
),
BambooOrientation #
Orientation describes the positioning or overall layout of an item related to other items. BambooOrientation provides you with the common orientations found in most software applications, thus Portrait and Landscape.
// Display a widget based on the current Orientation
const BambooOrientation(
portrait: Text('Hello Bamboo'),
landscape: FlutterLogo()
)
Mode #
Mode is a class that allows you to set widgets based on the current mode, either black or white. It is in two forms, Mode.all()
this allow you to set one value which applies to both themes. Mode.only()
this allow you to set either for light or dark.
/// Mode.only()
Container(
child: Mode.only(
context: context,
dark: const FlutterLogo(),
light: const Text(''),
),
),
/// Mode.all()
Container(
child: Mode.all(
context: context,
value: const FlutterLogo(),
),
),
Extensions ๐ #
Extension methods add functionality to existing libraries. Since we use some extensions initially we made up our minds to share those with you too. Below is all the extension you can access. We are trying hard to add more.
/// Returns the current orientation, either portrait or lanscape
context.orientation
/// Returns true if the screen is currently in the portrait mode, else false
context.isPortrait
/// Returns false if the screen is currently in the landscape mode, else false
context.isLandscape
/// Returns the current width
context.width
/// Returns the current height
context.height
/// Returns true if the current theme mode is dark.
context.isDark
/// Returns true if the current theme mode is light
context.isLight
Known Issues ๐งช #
No known issues so far.
Contributing โ๏ธ #
- Fix a bug
- Write and improve some documentation. Documentation is very critical to us. We would appreciate help in adding multiple languages to our docs.
- If you are a developer, feel free to check out the source and submit pull requests.
- Dig into CONTRIBUTING.MD, which covers submitting bugs, requesting new features, preparing your code for a pull request, etc.
- Please don't forget to like, follow, and star our repo!