humble library
humble library
this package is a compilation of widgets maybe useful for some cases when the standard flutter widgets fall short or we need a widget with a more specific function.
usage examples
humble library
floating drawer
humble library
import 'package:essential_widgets/widgets/floatingdrawer.dart';
import 'package:flutter/material.dart';
class floatingdrawerpage extends statelesswidget {
final list items = [
drawertile(
child: text("status: online"),
leading: icon(icons.cloud),
trailing: icon(
icons.brightness_1,
color: colors.green,
size: 10,
),
),
drawertile(
child: text("games"),
leading: icon(icons.gamepad),
trailing: icon(icons.chevron_right),
children: list.generate(2, (i) => drawertile(child: text("${i + 1}"))),
),
drawertile(
child: text("friends"),
leading: icon(icons.people),
trailing: icon(icons.chevron_right),
children: list.generate(5, (i) => drawertile(child: text("${i + 1}"))),
),
drawertile(
child: text("exit"),
leading: icon(icons.exit_to_app),
),
];
@override
widget build(buildcontext context) {
return scaffold(
appbar: appbar(
actions: [
popupmenubutton<string>(
color: colors.transparent,
elevation: 0,
itembuilder: (context) => [
popupmenuitem(
child: container(
width: 300,
child: floatingdrawer(
separator: container(
width: double.infinity,
height: 1,
color: colors.black12,
),
color: colors.white,
borderradius: borderradius.circular(15),
tiles: [...items],
),
),
)
],
)
],
),
);
}
}
params
humble library
| name | type | description |
|---|---|---|
| tiles (required) | list | defines the rows in the drawer |
| color | color | defines the background color |
| separator | widget | defines the tiles divider |
| borderradius | borderradiusgeometry | defines the border radius for the drawer |
multi fab
humble library
import 'package:essential_widgets/widgets/multifab.dart';
import 'package:flutter/material.dart';
class multifabpage extends statelesswidget {
@override
widget build(buildcontext context) {
return scaffold(
body: center(
child: text('hola mundo'),
),
floatingactionbutton: multifab(
children: [
...list.generate(
3,
(i) => multifabitem(
onpressed: () {},
child: text("$i"),
))
],
));
}
}
params
humble library
| name | type | description |
|---|---|---|
| unfoldedicon | widget | defines the icon to show when the fab is open |
| foldedicon | widget | defines the icon to show when the fab is closed |
| customicon | widget | defines the icon to show in the fab overwriting the folded and unfolded icons |
| children (required) | list | defines the widgets to show when the fab is open |
| shape | shapeborder | defines the shape of the fab |
| animationduration | duration | defines the duration of unfold animation |
| tooltip | string | defines the string tooltip |
| color | color | defines the fab background color |
| ontap | function | defines a custom action when the fab is tapped |
shadowed
humble library
import 'package:essential_widgets/widgets/shadowed.dart';
import 'package:flutter/material.dart';
class shadowedpage extends statelesswidget {
@override
widget build(buildcontext context) {
return scaffold(
body: center(
child: shadowed(
child: text(
'hola mundo',
style: textstyle(fontsize: 30),
),
blurlevel: 1.5,
distance: 3,
shadowcolor: colors.black45,
),
),
);
}
}
params
humble library
| name | type | description |
|---|---|---|
| child (required) | widget | defines the widget to shade |
| blurlevel | double | defines the level of blur in the shadow |
| distance | double | defines the distance between the child and the shadow |
| shadowcolor | color | defines the color of the shadow |
slideshow
import 'package:essential_widgets/widgets/slideshow.dart';
import 'package:flutter/material.dart';
class slideshowpage extends statelesswidget {
@override
widget build(buildcontext context) {
return scaffold(
body: center(
child: slideshow(
slides: [
...list.generate(
3,
(i) => container(
alignment: alignment.center,
child: text(
"$i",
style: textstyle(fontsize: 35, color: colors.white),
),
decoration: boxdecoration(
color: colors.bluegrey[400],
borderradius: borderradius.circular(25)),
),
)
],
),
),
);
}
}
params
| name | type | description |
|---|---|---|
| slides (required) | list | defines the widgets to show |
| dotsontop | bool | define if the dots are showed on the top or in the bottom |
| primarycolor | color | defines the color of the dot for the selected slide |
| secondarycolor | color | defines the color of the dots when aren’t selected |
| dotsspace | double | defines the space between dots |
| shape | boxshape | defines the shape of the dots |
| dotssize | double | defines the size of the dot fot the selected slide |
| secondarydotssize | double | defines the size of the dots when aren’t selected |
| slidespadding | double | defines the space between the slides |
| scrolldirection | axis | defines the scroll direction for the slideshow |
| showdots | bool | define if the dots may showed or not |
deployable
import 'package:essential_widgets/widgets/deployable.dart';
import 'package:flutter/material.dart';
class deployablepage extends statelesswidget {
@override
widget build(buildcontext context) {
return scaffold(
body: container(
alignment: alignment.centerright,
child: stack(
alignment: alignment.centerright,
children: [
safearea(
child: container(
margin: edgeinsets.all(10),
padding: edgeinsets.all(10),
height: double.infinity,
width: double.infinity,
decoration: boxdecoration(
borderradius: borderradius.circular(20),
color: colors.bluegrey[100],
),
),
),
deployable(
child: text(
"hello world",
style: textstyle(fontsize: 18),
),
),
],
),
),
);
}
}
deployable
| name | type | description |
|---|---|---|
| cutinleft | bool | defines the cut direction of the container |
| color | color | defines the background color |
| iconcolor | color | defines the color of the deployable icon |
| child (required) | widget | defines the widget to deploy |
| alignment | alignment | defines the alignment direction of the child container when is deployed |
blurred
import 'package:essential_widgets/widgets/blurred.dart';
import 'package:flutter/material.dart';
class blurredpage extends statelesswidget {
@override
widget build(buildcontext context) {
return scaffold(
body: center(
child: blurred(
width: 200,
height: 200,
opacity: .1,
blur: 8,
accentcolor: colors.bluegrey,
boxdecoration: boxdecoration(borderradius: borderradius.circular(20)),
child: flutterlogo(size: 100),
),
),
);
}
}
blurred
| name | type | description |
|---|---|---|
| width | double | defines the width of the container |
| height | double | defines the height of the container |
| opacity | double | defines the opacity of the accent color |
| blur | double | defines the amount of blur in the widget |
| child (required) | widget | defines the widget to be blurred |
| accentcolor | color | defines the a color layer for the blur |
| boxdecoration | boxdecoration | defines the box decoration for the blurred container |
responsive
- factors defines the values that determine the widget to use, by default are 200px and 800px respectively.
factors[0] -> sm
factors[1] -> md
import 'package:essential_widgets/widgets/responsive.dart';
import 'package:flutter/material.dart';
class responsivepage extends statelesswidget {
@override
widget build(buildcontext context) {
return scaffold(
body: center(
child: responsive(
sm: text("small"),
md: text("medium"),
lg: text("large"),
factors: [220, 768],
),
),
);
}
}
params
| name | type | description |
|---|---|---|
| sm | widget | defines the widget to show in small screens |
| md | widget | defines the widget to show in medium size screens |
| lg (required) | widget | defines the widget to show in large (default) screens |
| factors | list | defines the sizes for each breakpoint (sm,md) |
Comments are closed.