sura_flutter
a flutter package from asurraa for widgets and utility functions.
migrate from 2.x to 3.x
- breaking change:
- remove futuremanager, asyncsubjectmanager, futuremanagerbuilder
- all manager class now has a separate package
dependencies: sura_manager: any
installation
add this to pubspec.yaml
dependencies:
sura_flutter: ^0.4.2
widgets
widget | description |
---|---|
suraraisedbutton | custom elevatedbutton with loading notifier |
surabadge | small badge like notification |
suraactionsheet | custom cupertinoactionsheet for option selector |
conditionalwidget | build a widget base on a boolean condition |
suratoolbar | custom toolbar or appbar |
surafuturehandler | futurebuilder with less boilerplate code |
suraaccordian | custom expansiontile |
suraexpandable | similar to suraaccordion but with different use case |
suraconfirmationdialog | platform adaptive alertdialog with cancel and confirm action |
suraasyncbutton | fully customize material elevatedbutton for asynchronus onpressed callback |
suraloadingdialog | create and manage loading dialog |
suraplatformchecker | platform adaptive widget |
surasimpledialog | simple platform adaptive alertdialog |
suralisttile | custom listtile |
surapaginatedlist | listview with pagination support |
surapaginatedgridbuilder | gridview with pagination support |
suraiconbutton | custom iconbutton |
suraflatbutton | cusztom textbutton or flatbutton |
spacex | sizedbox with only width |
spacey | sizedbox with only height |
surastreamhandler | a streambuilder with less boilerplate code |
suranotifier | a valuelistenablebuilder with less boilerplate code |
mixin
afterbuildmixin
create an override method that will call after the build method has been called
class _homepagestate extends state<newpage> with afterbuildmixin {
//this method will call after widget has been build
@override
void afterbuild(buildcontext context) {
}
@override
widget build(buildcontext context) {
return container();
}
}
suraformmixin
provide some property and method when working with form
field and attribute
- formkey: a key for form
- loadingnotifier: a bool valuenotifier
- passwordobsecurenotifier: a bool valuenotitifer for toggling password obsecure field
- isformvalidated: a bool return by validate formkey
method
- toggleloading: toggle loadingnotifier
- togglepasswordobsecure: toggle passwordobsecurenotifier
class _homepagestate extends state<newpage> with suraformmixin {
@override
widget build(buildcontext context) {
return scaffold(
body: form(key: formkey, child: child)
);
}
}
boolnotifiermixin
provider a valuenotifier<bool>
and a value toggle function
- boolnotifier: a bool valuenotifier
method
- togglevalue: toggle loadingnotifier
class _homepagestate extends state`<newpage>` with boolnotifiermixin {
@override
widget build(buildcontext context) {
return container();
}
}
widget’s extension
padding, margin
text("hello flutter").padding(edgeinsets.all(16.0)) // defaulat value is edgeinsets.all(8.0)
text("hello flutter").margin(edgeinsets.all(16.0)) // defaulat value is edgeinsets.all(8.0)
///as a value
text("hello flutter").marginvalue(all: 12)
text("hello flutter").paddingvalue(horizontal: 12, vertical: 8)
cssspacing
text("hello flutter").cssspacing(margin: [10,10], padding:[16])
//css margin and padding rule
rotate (in degree)
text("hello flutter").rotate(45)
flexible, expanded, clipoval, opacity
text("hello flutter").flexible
text("hello flutter").expanded
text("hello flutter").clipoval
text("hello flutter").opacity(0.5)
textstyle extention
text("hello flutter", style: textstyle().normal)
text("hello flutter", style: textstyle().medium)
text("hello flutter", style: textstyle().bold)
text("hello flutter", style: textstyle().applycolor(colors.white))
text("hello flutter", style: textstyle().applfontsize(24))
other extension
buildcontext extension
size screensize = context.screensize;
color primarycolor = context.primarycolor;
color accentcolor = context.accentcolor;
texttheme texttheme = context.texttheme;
theme theme = context.theme;
datetime extension
datetime.now().format(format: "dd mmm yyyy", locale: context.locale)
datetime.now().isthesameday(datetime.now())
datetime.now().formattolocaldate(format: "dd mmm yyyy", locale: context.locale)
string extension
string name = "chunlee".capitalize() // => chunlee
utility and style
dottabindicator
tabbar(
...
indicator: dottabindicator(
color: colors.blue,
dotalignment: tabalignment.bottom,
)
...
)
smallunderlinetabindicator
tabbar(
...
isscrollable: true, //this indicator work best with scrollable tab bar
indicator: smallunderlinetabindicator(
color: colors.blue,
paddingleft: 16,
alignment: tabalignment.bottom,
)
...
)
shadowinputborder
this input border solve a problem thath textfield doesn’t have a default elevation.
textformfield(
...
decoration: inputdecoration(
border: shadowinputborder(
elevation: 2.0, //required
fillcolor: colors.white, //required
borderradius: sraustyle.radius(),
shadowcolor: colors.black87,
),
)
...
)
suracolor
//get color from hex string
color green = suracolor.fromcode("42f545")
//get color from rgb without alpha or opacity
color newcolor = suracolor.fromrgb(8, 182, 155)
//convert color to materialcolor
materilcolor newmaterialcolor = suracolor.tomaterial(0xff869cf4)
surautils
//get byte from asset bundle
future`<uint8list>` imagebyte = await surautils.getbytesfromasset("image asset path", 200); //200 is imagewidth
//get random image from unsplash
string carurlimage = surautils.unsplashimage(width: 200, height: 200, category: "car");
//get random from picsum with provided: width and height
string randomurlimage = surautils.picsumimage(200,300);
suraformvalidator
provide some field validation
textformfield(
validator: (value) => suraformvalidator.validatefield(value, field:"username"),
)
pagenavigator and suranavigator
pagenavigator support push, pushreplacement and pushandremove method
pagenavigator.push(context, detailpage());
pagenavigator.pushreplacement(context, homepage());
pagenavigator.pushandremove(context, rootpage());
suranavigator also support push, pushreplacement, pushandremove without providing a context but you need to add suranavigator.navigatorkey to materialapp
materialapp(
...
navigatorkey: suranavigator.navigatorkey,
...
home: myhomepage(),
)
suranavigator.push(detailpage());
suranavigator.pushreplacement(homepage());
suranavigator.pushandremove(rootpage());
suranavigator also can show dialog without providing a context
var result = await suranavigator.dialog(mydialog());
suradecoration
roundedrectangleborder roundrectangle = suradecoration.roundrect(12);//default value is 8
borderradius radius = suradecoration.radius(12); //default value is 8
Comments are closed.