sura_flutter

pub package

A flutter package from AsurRaa for widgets and utility functions

Installation

Add this to pubspec.yaml

dependencies:
  sura_flutter: ^0.1.4

Widgets

WidgetDescription
SuraRaisedButtonA Material ElevatedButton with loading notifier
SuraBadgeA small badge like notification
SuraActionSheetACupertino bottom sheet with option
ConditionalWidgetBuild a widget base on a boolean condition
SuraToolbarA custom back button with title (header)
SuraFutureHandlerA FutureBuilder with less boilerplate code
SuraAccordianA customizable ExpansionTile
SuraExpandableA widget that can be toggle with top and bottom widget
SuraConfirmationDialogAn Alert dialog with cancel and confirm action
SuraAsyncButtonA Material ElevatedButton that has a loading widget
SuraLoadingDialogA Loading dialog manager class
SuraPlatformCheckerProvide a widget base on Android or iOS platform
SuraSimpleDialogA simple alert dialog
SuraListTileAn easy and customizable ListTile
SuraPaginatedListA Listview.separated with pagination support
SuraPaginatedGridBuilderA Gridview.builder with pagination support
SuraIconButtonA customizable IconButton
SuraFlatButtonA small alternative to Flutter's FlatButton
SpaceXSizedBox with only width
SpaceYSizedBox with only height
SuraStreamHandlerA Streambuilder with less boilerplate code
SuraNotifierA ValueListenableBuilder with less boilerplate code

Mixin

AfterBuildMixin

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

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

NotifierMixin

  • loadingNotifier: a bool ValueNotifier

method

  • toggleLoading: toggle loadingNotifier
class _HomePageState extends State<NewPage> with SuraFormMixin {
  @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("dd mmm yyyy")
DateTime.now().isTheSameDay(DateTime.now())
DateTime.now().formatToLocalDate("dd mmm yyyy")

String extension

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

Utility and Style

DotTabIndicator

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

SmallUnderlineTabIndicator

  TabBar(
      ...
      indicator: SmallUnderlineTabIndicator(
        color: Colors.blue,
        width: 16,
        height: 8,
        radius: 8,
        paddingLeft: 16,
        alignment: TabAlignment.bottom,
      )
      ...
  )

ShadowInputBorder

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

      )
      ...
  )

SuraColor

Color green = SuraColor.fromCode("42f545")
Color newColor = SuraColor.fromRGB(8, 182, 155)
MaterilColor newMaterialColor = SuraColor.toMaterial(0xFF869CF4)

SuraUtils

Future<Uint8List> imageByte = await SuraUtils.getBytesFromAsset("image asset path", 200); //200 is imagewidth
String carUrlImage =  SuraUtils.unsplashImage(dimension: 200, category: "car"); //get image url from unsplash with given dimension and category
String randomUrlImage = SuraUtils.picsumImage(200); //get random image url from picsum with given dimension

SuraFormValidator

TextFormField(
validator: (value) => SuraFormValidator.validateField(value, field:"username"),
// check JinValidator class for more field validator
)

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

SuraStyle

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

Libraries

sura_flutter