Skip to content

Latest commit

 

History

History
249 lines (162 loc) · 6.18 KB

README.md

File metadata and controls

249 lines (162 loc) · 6.18 KB
Raw

Shark Flutter 🦈 (Official)

pub package CodeFactor build

A Flutter server rendering framework

What it is

Shark is a server rendering framework, a server-driven UI framework.

Simple use case of shark

Let say you have a text widget, you specify it as json on the server return to the client, the client use shark to receive the text widget and show the UI successfully.

After a while, you want to change the text widget to a button, instead of modify it on the client code and go through all the mobile app store updating process, you only need to modify the text widget to a button widget on the server, and the shark client received it, showed the newest UI.

Project diagram

Guide

How to use

First, init Shark library on main method on your application

  void main() {
    WidgetsFlutterBinding.ensureInitialized();
    await Shark.init(hostUrl: 'http://yourhost.com');

    runApp(MyApp());
  }

Second, set up UI widget

  • To be noticed, every thing related to widget is controlled by SharkController
  • fromUrl method would send a REST api request to your server, which indicates the path from your current url.
  • get method is where we send the request
  late final SharkController _controller;

  /// init the shark controller
  @override
  void initState() {
    _controller = SharkController.fromUrl(path: '/container',)..get();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SharkWidget(controller: _controller);
  }

To redirect to another page, call redirect

_controller.redirect('/your_new_path');

To refresh current page, call refresh

_controller.refresh();

If you want to create your own parser

class MyCustomParser extends SharkParser {}

Routing

shark auto handles your page routing, if you do not want it, set handleClickEvent to false

 _sharkController = SharkController('/your_path', handleClickEvent: false);

Click Event

Routing trigger by click event, which you can set it like this on your json widget file.

A sample event json format

    {
        "type": "container",
        "click_event": "route://your_path?xxx=xxx"
    }

  • schema: $yourschema://

  • path: your_path

  • argument: After the prefix '?' is the argument field. xxx=xxx, separate with &

sample:

"click_event": "route://second_page?name=hello&place=world"

The schema represents the routing action

Currently, there are 4 routing action

route: prefix with route://, internally would call Navigator.pushName('new_path', args)

Push a new route to Navigator

** Please remember to specify route path on your route map

   MaterialApp(
     onGenerateRoute: (RouteSettings settings) {
        String routePath = settings.name?.toString() ?? '';
        if (baseRoute.containsKey(routePath)) {
          return MaterialPageRoute(
              settings: settings, builder: your_route_table[routeName]!);
        } else
          return null;
      },
     home: $yourhomepage,
   ),

  • pop: prefix with pop://, internally would call Navigator.pop(result)

  • redirect: prefix with redirect://, redirect current page with the following path

  • link: use url_launcher internally to open a url on browser, please visit url_launcher to configure the detail requirements for each platform

Caching

Shark use dio_cache_interceptor for caching purposes.

When you initialize the shark library, you can pass a cacheStrategy argument to config your caching setting.

Parsing

Note that Shark uses dynamic_widget for widget parsing,

If you want to create your own parser

class MyCustomParser extends SharkParser {}

Then add this new parser to shark widget

_sharkController.addParser(MyCustomParser());

To view the json format, go visit [documentation](https://github.com/dengyin2000/dynamic_widget/blob/master/WIDGETS.md) on dynamic_widget.

Localization

shark uses easy_localization for localization, follow the instructions to set up.

After setting up easy_localization package, next thing you need to do is to add a TranslatedTextParser to shark widget

TranslatedTextParser do all the localize work for you

_sharkController.addParse(TranslatedTextParser());

In your server json file, modify the text tag to translatedText

{
    "type": "Text",
    "data": "Redirect To next page"
}

To

{
    "type": "TranslatedText",
    "data": "Redirect To next page"
}

data value should be the value corresponds to your translations json file key

sample translations file zh.json

{
  "Navigate To next page":"push路由，转入下一页",
  "Redirect To next page": "转换至另一页",
  "To goog.gl": "去谷歌"
}

That's it ~~



OTHER

You can also view the express server sample, you can deploy to heroku fast

or you can test it on this temporary host =(little slow)

https://shark-sample-server.herokuapp.com/

Real world sample

(Promotion 😂)

My new meditation app had implemented shark recently, the profile page is handled by shark completely.

https://seasonnatural.netlify.app/



My work email : lauchuen94@gmail.com