getx 0.0.3

Flutter Android iOS

A new Flutter package project.

GetX #

A consistent navigation library that lets you navigate between screens, open dialogs/bottomSheets, and display snackbars from anywhere in your code without context.

Getting Started #

Flutter's conventional navigation requires context to navigate between screens, open dialogs, and use snackbars on framework is really painful. In addition, with each route navigation, all of your screens below MaterialApp are rebuilt, often causing RAM and CPU bottlenecks. I worked on a pull to fix it in the framework, and seeing how things work I realized that a lot of cliche code could be avoided to get clean and concise code. With that in mind, I created this library that will change the way you work with the Framework and save your life from cliche code, increasing your productivity, and eliminating all the bugs present in Flutter's default navigation altogether.

If you use MODULAR, you can add on your MaterialApp this: navigatorKey: GetX.addKey(Modular.navigatorKey)

How to use? #

Add this to your package's pubspec.yaml file:

dependencies:
  getx: ^0.0.3

And import it:

import 'package:getx/getx.dart';

Add GetXKey to your MaterialApp and enjoy:

MaterialApp(
    navigatorKey: GetX.key,
    home: MyHome(),
  )

To navigate to a new screen:

GetX.to(NextScreen());

To return to previous screen

GetX.back();

To go to the next screen and no option to go back to the previous screen (for use in SplashScreens, login screens and etc.)

GetX.off(NextScreen());

To go to the next screen and cancel all previous routes (useful in shopping carts, polls, and tests)

GetX.offAll(NextScreen());

To navigate to the next route, and receive or update data as soon as you return from it:

var data = await GetX.to(Payment());

on other screen, send a data for previous route:

GetX.back(result: 'sucess');

And use it:

ex:

if(data == 'sucess') madeAnything();

SnackBars #

To show a modern snackbar:

GetX.snackbar('Hi', 'i am a modern snackbar');

To have a simple SnackBar with Flutter, you must get the context of Scaffold, or you must use a GlobalKey attached to your Scaffold, but with GetX, all you have to do is call your GetX.snackbar from anywhere in your code or customize it however you want!

  GetX.snackbar(
               "Hey i'm a Get SnackBar!", // title
               "It's unbelievable! I'm using SnackBar without context, without boilerplate, without Scaffold, it is something truly amazing!", // message
              icon: Icon(Icons.alarm), 
              shouldIconPulse: true,
              onTap:(){},
              barBlur: 20,
              isDismissible: true,
              duration: Duration(seconds: 3),
            );

  ////////// ALL FEATURES //////////
  //     Color colorText,
  //     Duration duration,
  //     SnackPosition snackPosition,
  //     Widget titleText,
  //     Widget messageText,
  //     Widget icon,
  //     bool shouldIconPulse,
  //     double maxWidth,
  //     EdgeInsets margin,
  //     EdgeInsets padding,
  //     double borderRadius,
  //     Color borderColor,
  //     double borderWidth,
  //     Color backgroundColor,
  //     Color leftBarIndicatorColor,
  //     List<BoxShadow> boxShadows,
  //     Gradient backgroundGradient,
  //     FlatButton mainButton,
  //     OnTap onTap,
  //     bool isDismissible,
  //     bool showProgressIndicator,
  //     AnimationController progressIndicatorController,
  //     Color progressIndicatorBackgroundColor,
  //     Animation<Color> progressIndicatorValueColor,
  //     SnackStyle snackStyle,
  //     Curve forwardAnimationCurve,
  //     Curve reverseAnimationCurve,
  //     Duration animationDuration,
  //     double barBlur,
  //     double overlayBlur,
  //     Color overlayColor,
  //     Form userInputForm
  ///////////////////////////////////

Dialogs #

To open dialog:

GetX.dialog(YourDialogWidget());

To open default dialog:

 GetX.defaultDialog(
                title: "My Title",
                content: Text("Hi, it's my dialog"),
                confirm: FlatButton(
                  child: Text("Ok"),
                  onPressed: () => print("OK pressed"),
                ),
                cancel: FlatButton(
                  child: Text("Cancel"),
                  onPressed: () => GetX.back(),
                ));

BottomSheets #

GetX.bottomSheet is like showModalBottomSheet, but don't need of context.

GetX.bottomSheet(
      builder: (_){
          return Container(
            child: Wrap(
            children: <Widget>[
            ListTile(
            leading: Icon(Icons.music_note),
            title: Text('Music'),
            onTap: () => {}          
          ),
            ListTile(
            leading: Icon(Icons.videocam),
            title: Text('Video'),
            onTap: () => {},          
          ),
            ],
          ),
       );
      }
    );

That's it, you've learned how to navigate between routes the default way. #

However, for people who like more organized code who want to navigate with named routes, or for Flutter_web Developers who want the url to show exactly which route is being shown, and want the page refresh not to affect the state of the routes. On your site, we give you a much more elegant and functional solution. Yeah, the default navigation doesn't fully support Flutter_web, but GetX does !!!!

So... Is possible used default namedRoutes from flutter? #

  • Yes, and with no navigation bug, add "named" to GetX. HOWEVER, TO MAKE THIS TYPE OF NAVIGATION, USE THE ROUTE MODEL FROM REPOSITORY. Example of navigation with named routes:

To navigate to nextScreen

GetX.toNamed("/NextScreen");

To navigate and remove the previous screen from the tree.

GetX.offNamed("/NextScreen");

To navigate and remove all previous screens from the tree.

GetX.offAllNamed("/NextScreen");

Using with Named Routes and And offering full flutter_web support (REQUIRED FOR NAMED ROUTES): #

Add " navigatorKey: GetX.key," to MaterialApp #

void main() {
  runApp(MaterialApp(
    onGenerateRoute: Router.generateRoute,
    initialRoute: "/",
    navigatorKey: GetX.key,
    title: 'Navigation',
  ));
}

Middleware

If you want listen GetX events to trigger actions, you can add a GetXObserver to your materialApp. This is extremely useful for triggering events whenever a specific Screen is displayed on the screen. Currently on Flutter you would have to put the event on initState and wait for a possible response in a navigator.pop (context); to get that. But with GetX, this is extremely simple!

add GetXObserver();
void main() {
  runApp(MaterialApp(
    onGenerateRoute: Router.generateRoute,
    initialRoute: "/",
    navigatorKey: GetX.key,
    navigatorObservers: [
        GetXObserver(MiddleWare.observer), // HERE !!!
    ],
  ));
}

Create a MiddleWare class

class MiddleWare {
  static observer(Routing routing) {
    /// You can listen in addition to the routes, the snackbars, dialogs and bottomsheets on each screen. 
    ///If you need to enter any of these 3 events directly here, 
    ///you must specify that the event is != Than you are trying to do.
    if (routing.current == '/second' && !routing.isSnackbar) {
      GetX.snackbar("Hi", "You are on second route");
    } else if (routing.current =='/third'){
      print('last route called');
    }
  }
}

COPY THE ROUTER CLASS BELOW: #

Copy this Router class below and put it in your app, rename routes and classes for your own, add more classes to it if necessary.

class Router {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return GetXRoute(
          page: First(),
          settings: settings,
        );
      case '/second':
        return GetXRoute(
            settings: settings, page: Second(), transition: Transition.fade);
      case '/third':
        return GetXRoute(
            settings: settings,
            page: Third(),
            transition: Transition.rightToLeft);
      default:
        return GetXRoute(
            settings: settings,
            transition: Transition.fade,
            page: Scaffold(
              body:
                  Center(child: Text('No route defined for ${settings.name}')),
            ));
    }
  }
}
Experimental

If you need specific Cupertino elements, such as dragging to close, you can use GetCupertino:

class Router {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return GetXCupertino(
          page: First(),
          settings: settings,
        );
      case '/second':
        return GetXCupertino(
            settings: settings, page: Second());
      case '/third':
        return GetXCupertino(
            settings: settings,
            page: Third());
      default:
        return GetXCupertino(
            settings: settings,
            page: Scaffold(
              body:
                  Center(child: Text('No route defined for ${settings.name}')),
            ));
    }
  }
}

And now, all you need to do is use GetX.toNamed() to navigate your named routes, without any context (BLoC will love it), and when your app is compiled to the web, your routes will appear in the url beautifully <3

class First extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            GetX.snackbar("hi", "i am a modern snackbar");
          },
        ),
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            GetX.toNamed("/second");
          },
        ),
      ),
    );
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            GetX.snackbar("hi", "i am a modern snackbar");
          },
        ),
        title: Text('second Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            GetX.toNamed("/third");
          },
        ),
      ),
    );
  }
}

class Third extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Third Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            GetX.back();
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

Others methods (docs will be added soon): #

GetX.removeRoute() // remove one route.

GetX.until() // back repeatedly until the predicate returns true.

GetX.offUntil() // go to next route and remove all the previous routes until the predicate returns true.

GetX.offNamedUntil() // go to next named route and remove all the previous routes until the predicate returns true.

That is all.

2
likes
80
pub points
46%
popularity

A new Flutter package project.

Documentation

API reference

Uploader

zetsu.guruguru@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on getx