A flutter package from AsurRaa for widgets and utility functions
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