sura_flutter 0.4.3
sura_flutter: ^0.4.3 copied to clipboard

A flutter package from AsurRaa for widgets and utility functions

sura_flutter #

pub package Latest commit

A flutter package from AsurRaa for widgets and utility functions

Migrate from 2.x to 3.x #


    • remove FutureManager, AsyncSubjectManager, FutureManagerBuilder
    • All manager class now has a separate package
      sura_manager: any

Installation #

Add this to pubspec.yaml

  sura_flutter: ^0.4.3

Widgets #

SuraRaisedButtonCustom ElevatedButton with loading notifier
SuraBadgeSmall badge like notification
SuraActionSheetCustom CupertinoActionSheet for option selector
ConditionalWidgetBuild a widget base on a boolean condition
SuraToolbarCustom ToolBar or AppBar
SuraFutureHandlerFutureBuilder with less boilerplate code
SuraAccordianCustom ExpansionTile
SuraExpandableSimilar to SuraAccordion but with different use case
SuraConfirmationDialogPlatform adaptive AlertDialog with cancel and confirm action
SuraAsyncButtonFully customize Material ElevatedButton for asynchronus onPressed callback
SuraLoadingDialogCreate and manage Loading Dialog
SuraPlatformCheckerPlatform adaptive widget
SuraSimpleDialogSimple platform adaptive AlertDialog
SuraListTileCustom ListTile
SuraPaginatedListListView with pagination support
SuraPaginatedGridBuilderGridview with pagination support
SuraIconButtonCustom IconButton
SuraFlatButtonCusztom TextButton or FlatButton
SpaceXSizedBox with only width
SpaceYSizedBox with only height
SuraStreamHandlerA Streambuilder with less boilerplate code
SuraNotifierA 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
  void afterBuild(BuildContext context) {


  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


  • toggleLoading: toggle loadingNotifier
  • togglePasswordObsecure: toggle passwordObsecureNotifier
class _HomePageState extends State<NewPage> with SuraFormMixin {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(key: formKey, child: child)

BoolNotifierMixin #

Provider a ValueNotifier

  • boolNotifier: a bool ValueNotifier


  • toggleValue: toggle loadingNotifier
class _HomePageState extends State<NewPage> with BoolNotifierMixin {
  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 # "dd mmm yyyy", locale: context.locale) "dd mmm yyyy", locale: context.locale)

String extension #

String name = "chunlee".capitalize() // => Chunlee

Utility and Style #

DotTabIndicator #

alt text

      indicator: DotTabIndicator(
        dotAlignment: TabAlignment.bottom,

SmallUnderlineTabIndicator #

alt text

      isScrollable: true, //This indicator work best with scrollable tab bar
      indicator: SmallUnderlineTabIndicator(
        paddingLeft: 16,
        alignment: TabAlignment.bottom,

ShadowInputBorder #

This input border solve a problem thath TextField doesn't have a default elevation.

alt text

      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

validator: (value) => SuraFormValidator.validateField(value, field:"username"),

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

    navigatorKey: SuraNavigator.navigatorKey,
    home: MyHomePage(),

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
pub points

A flutter package from AsurRaa for widgets and utility functions

Repository (GitHub)
View/report issues


API reference




flutter, intl, rxdart, universal_platform


Packages that depend on sura_flutter