bamboo

Description:

bamboo

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>
copied to clipboard
In your library add the following import:
import 'package:bamboo/bamboo.dart';
copied to clipboard
Wrap your MaterialApp or root widget with our inherited widget. By default we have a default breakpoint but you can define your own breakpoint using our inherited widget.
BambooBreakPoint(
mobile: 500,
child: MaterialApp(
....
),
)
copied to clipboard
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"),
),
),
copied to clipboard
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,
),
),
copied to clipboard
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(),
)
copied to clipboard
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',
)
copied to clipboard
BambooHidden #
BambooHidden hide/display specify widget based on the current breakpoint.
const BambooHidden(
desktop: true,
tablet: false,
mobile: false,
large: false,
child: Text(''),
),
copied to clipboard
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()
)
copied to clipboard
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(),
),
),
copied to clipboard
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
copied to clipboard
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!

Show some ❤️ and star the repo #