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
    Dart

Installation

Add this to pubspec.yaml

dependencies:
  sura_flutter: ^0.4.2
Dart

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();
  }
}
Dart

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)
    );
  }
}
Dart

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();
  }
}
Dart

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)
Dart

cssSpacing

Text("Hello Flutter").cssSpacing(margin: [10,10], padding:[16])
//css margin and padding rule
Dart

rotate (in degree)

Text("Hello Flutter").rotate(45)
Dart

flexible, expanded, clipOval, opacity

Text("Hello Flutter").flexible
Text("Hello Flutter").expanded
Text("Hello Flutter").clipOval
Text("Hello Flutter").opacity(0.5)
Dart

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))
Dart

Other Extension

BuildContext extension

  Size screenSize = context.screenSize;
  Color primaryColor = context.primaryColor;
  Color accentColor = context.accentColor;
  TextTheme textTheme = context.textTheme;
  Theme theme = context.theme;
Dart

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)
Dart

String extension

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

Utility and Style

DotTabIndicator

tab-indicator-2

  TabBar(
      ...
      indicator: DotTabIndicator(
        color: Colors.blue,
        dotAlignment: TabAlignment.bottom,
      )
      ...
  )
Dart

SmallUnderlineTabIndicator

tab-indicator-1

  TabBar(
      ...
      isScrollable: true, //This indicator work best with scrollable tab bar
      indicator: SmallUnderlineTabIndicator(
        color: Colors.blue,
        paddingLeft: 16,
        alignment: TabAlignment.bottom,
      )
      ...
  )
Dart

ShadowInputBorder

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

shadow-input-border

  TextFormField(
      ...
      decoration: InputDecoration(
        border: ShadowInputBorder(
          elevation: 2.0, //required
          fillColor: Colors.white, //required
          borderRadius: SrauStyle.radius(),
          shadowColor: Colors.black87,
        ),

      )
      ...
  )
Dart

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)
Dart

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);
Dart

SuraFormValidator

Provide some field validation

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

PageNavigator support push, pushReplacement and pushAndRemove method

PageNavigator.push(context, DetailPage());
PageNavigator.pushReplacement(context, HomePage());
PageNavigator.pushAndRemove(context, RootPage());
Dart

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(),
)
Dart
SuraNavigator.push(DetailPage());
SuraNavigator.pushReplacement(HomePage());
SuraNavigator.pushAndRemove(RootPage());
Dart

SuraNavigator also can show dialog without providing a context

var result = await SuraNavigator.dialog(MyDialog());
Dart

SuraDecoration

RoundedRectangleBorder roundRectangle = SuraDecoration.roundRect(12);//default value is 8
BorderRadius radius = SuraDecoration.radius(12); //default value is 8
Dart

GitHub

https://github.com/asurraa/sura-flutter