MXFlutter online Flutter pub.dev three steps to access existing projects

---

Since the release of a preview version last year, MXFlutter has been optimized and restructured to be available on the iOS APP and Android platform with V0.2.1. Due to the complexity of the whole framework, there are many steps for business access. After a series of transformation and reconstruction recently, the standard Flutter Package has been reconstructed, and the official PUB library MxFLUTTER V0.2.1 was launched yesterday. The access process can be further simplified, and existing projects can be accessed in three simple steps. Open the MXFlutter page written by JS. Welcome small partners access taste. You can install the compiled Android package to experience mxFlutter_v0-1-2. Apk

MXFlutter is a JavaScript based framework for Flutter dynamics. It is the most complete and available open source solution for Flutter dynamics. It develops Flutter applications by writing JavaScript code in a very similar way to Dart. The code is open source on MXFlutter Github, and more details are detailed in the JavaScript based Flutter framework.

New in v0.2.1

• Upgrade adaptation to Flutter 1.17.0, corresponding to Channel stable tag v1.17.0
• Support Packages
  1. dio
  2. pull_to_refresh
  3. cached_network_image
  4. shared_preferences
• Support MessageChannel
• Performance and stability optimization, Bug Fix

MXFlutter Roadmap

Overall objectives and direction

• Expand the development camp of Flutter with JS development to make Flutter dynamic.
• The support services are developed by Dart, compiled into JS and run directly using MXJsBuilder. The same Dart code can support AOT compilation into Native APP, or it can also be compiled into JS to support dynamic.

MXFlutter is currently under the Roadmap of MXFlutter because of the huge amount of engineering and limited manpower. There are still many aspects that need to be modified and optimized step by step

MXFlutter Access Guide

Mxflutter is a standard Dart package that can be accessed in the same way that Dart introduces package. The steps are very simple. Before you start plugging in, run two examples of experiencing MxFltuter, which can be helpful. One is a rich but complex example, available at github.com/mxflutter/m… The root directory of the main library, one of the simplest access examples, is the mxflutter/example/ directory. The second example is recommended for the first access.

Mxflutter V0.2.1 corresponds to Flutter 1.17.0 (Channel stable tag:v1.17.0)

Three steps to access the MXFlutter

1. Add dependencies

Dependencies: mxflutter: ^ 0.2.1Copy the code

Because MxFlutter is iterating quickly, it is recommended to fork the github main library github.com/mxflutter/m… To access, the aspects themselves are modified and regularly updated from the master library.

  dependencies:
    mxflutter:
      git:
        url: https://github.com/mxflutter/mxflutter.git
        path: mxflutter/

Copy the code

2. Copy the sample JS code file and configure the import of JS code resources

First step file copy JS code: mxflutter main library provides the JS code template, copy the main library mxflutter/example/mxflutter_js_src (github.com/mxflutter/m…). Go to your project directory, the same level as the pubspec.yaml file.

The second step is to introduce the mxFlutter_js_src code resource folder in the pubspec.yaml file

 flutter:
   assets:
     - mxflutter_js_src/

Copy the code

Note that the folder copied in step 1 is compatible with the resource imported in step 2, because pubspec.yaml does not automatically import subfolders when importing resources if you are copying the main library rootGithub.com/mxflutter/m…Folder, to form a complete set according to the main library pubspec. Yaml allocation of resources to introduce and study access recommend the use of mxflutter/example/mxflutter_js_src example

The finished directory structure should look like this

My_flutter / ├ ─ ─ lib / │ └ ─ ─. Main dart └ ─ ─ pubspec. Yaml └ ─ ─ mxflutter_js_src / │ └ ─ ─ the main, js │ └ ─ ─ home_page. Js │ └ ─ ─ Js_dev_demo. Js │ └ ─ ─ mxjsbuilder_demo. JsCopy the code

3. In the Flutter code, run MXFlutter to open the page written by JS

Dart starts JSApp by calling runJSApp in the main.dart file. If the runJSApp function passes no parameters, the mxflutter_js_src/mian.js file is run by default

//mxflutter
import 'package:mxflutter/mxflutter.dart';

void main() {/ / -- -- -- -- -- -- -- 1. MXFlutter start -- -- -- -- -- -- -- -- - MXJSFlutter. GetInstance (). RunJSApp (); runApp(MyApp()); }Copy the code

Open the JS page when appropriate, such as when the user clicks the screen.

OnTap: () {//-------2. MXFlutter push a page written using the MXFlutter framework Navigator. Push (Context, MaterialPageRoute(Builder: (context) => MXJSPageWidget( jsWidgetName:"MXJSWidgetHomePage")));
              }

Copy the code

The MXJSPageWidget argument jsWidgetName: “MXJSWidgetHomePage”, in the mxflutter_js_src/main. Js MyApp: : createJSWidgetWithName function, to mark which js page open.

Bingo with luck, the basic access work is done and you should be able to open a classic Flutter sample page. Next, try modifying the JS file in the mxFlutter_js_src/folder to see the UI change.

More easy-to-use configurations

IOS emulator hot reload support

In github.com/mxflutter/m… In the case of the main iOS project or the main mxflutter/example/ directory, the appdelegate. m file details how to enable emulator hot reload. Copy setupMXFlutterJSPath function, registered in the Flutter plug-in [GeneratedPluginRegistrant registerWithRegistry: self]. Just call it before

- (void)setupMXFlutterJSPath{//mxflutter js code can be redirected to a local address, and js files can be reloaded. Use the same API to set up the download directory for your JS code#if TARGET_IPHONE_SIMULATOR// Business JS code hot overload NSString *jsAppPath = nil; NSArray *jsAppSearchPathList = nil; NSString *jsFramewrokPath = nil; NSString *jsFramewrokPath = nil; ///1. You can directly modify and locate the absolute path. However, in multi-party collaborative development, each path has different needs and needs to be configured. Configuration PROJECT_DIR / / / jsFramewrokPath = @ "/ Volumes/Data/Work/mxflutter2 / mxflutter/js_lib"; ///jsAppPath = @"/Volumes/Data/Work/mxflutter2/mxflutter_js_src/"///2. You can configure PROJECT_DIR to redirect the JS code path address to the developer's iMac address to support simulator hot overloading and multi-player collaboration. XCode -> Build Settings -> Preprocessor Macros: Debug Add PROJECT_DIR=@\""$PROJECT_DIR/ /"\" /// This is the flutter/example/ios project under github https://github.com/TGIF-iMatrix/mxflutter.git as an example, Js_lib / / / the following physical path configuration # ifdef PROJECT_DIR / / can adjust the relative path according to your own project deployment jsAppPath = [PROJECT_DIR stringByAppendingPathComponent: @"../mxflutter_js_src/"]; // jsAppSearchPathList = @[ [jsAppPath stringByAppendingPathComponent:@"app_demo/"], [jsAppPath stringByAppendingPathComponent:@"mxjsbuilder_demo/"]]; jsFramewrokPath = [PROJECT_DIR stringByAppendingPathComponent:@". /.. /js_lib/"]; # endif / / you can call [MXFlutterPlugin setJSFramewrokPath: jsFramewrokPath]; Set jsframework to Documents in your download directory, Hot update if support framework (jsFramewrokPath. Length > 0) {[MXFlutterPlugin setJSFramewrokPath: jsFramewrokPath]; } if (jsAppPath.length > 0) { [MXFlutterPlugin setJSAppPath:jsAppPath jsAppSearchPathList:jsAppSearchPathList]; } #endif }Copy the code

Sample APP Demo screenshot:

The following screenshots are developed in JS with the MXFlutter framework. You can download the source code above, which contains complete JS code samples:

Single page demo

This is JavaScript code that renders the UI of A Flutter on the MXFlutter runtime library.

class JSPestoPage extends MXJSWidget {
  constructor() {
    super("JSPestoPage");
    this.recipes = recipeList;

  }

  build(context) {
    let statusBarHeight = 24;
    let mq = MediaQuery.of(context);
    if (mq) {
      statusBarHeight = mq.padding.top
    }

    let w = new Scaffold({
      appBar: new AppBar({
        title: new Text("Pesto Demo")}),floatingActionButton: new FloatingActionButton({
        child: new Icon(new IconData(0xe3c9)),
        onPressed: function () {},}),body: new CustomScrollView({
        semanticChildCount: this.recipes.length,
        slivers: [
          //this.buildAppBar(context, statusBarHeight),
          this.buildBody(context, statusBarHeight),
        ],
      }),
      //body:this.buildItems()[0]
    });

    return w;
  }

  buildAppBar(context, statusBarHeight) {
    return SliverAppBar({
      pinned: true.expandedHeight: _kAppBarHeight,
      actions: [
        IconButton({
          icon: new Icon(new IconData(1)),
          tooltip: 'Search'.onPressed: function () {},})],flexibleSpace: LayoutBuilder({
        builder: function (context, constraints) {
          size = constraints.biggest;
          appBarHeight = size.height - statusBarHeight;
          t = (appBarHeight - kToolbarHeight) / (_kAppBarHeight - kToolbarHeight);
          extraPadding = new Tween({ begin: 10.0.end: 24.0 }).transform(t);
          logoHeight = appBarHeight - 1.5 * extraPadding;
          return Padding({
            padding: EdgeInsets.only({
              top: statusBarHeight + 0.5 * extraPadding,
              bottom: extraPadding,
            }),
            child: Center({
              child: new Icon(new IconData(1))})}); }})}); } buildBody(context, statusBarHeight) {let mediaPadding = EdgeInsets.all(0);
    let mq = MediaQuery.of(context);
    if (mq) {
      mediaPadding = MediaQuery.of(context).padding;
    }
    let padding = EdgeInsets.only({
      top: 8.0.left: 8.0 + mediaPadding.left,
      right: 8.0 + mediaPadding.right,
      bottom: 8.0
    });

    return new SliverPadding({
      padding: padding,
      sliver: new SliverGrid({
        gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent({
          maxCrossAxisExtent: _kRecipePageMaxWidth,
          crossAxisSpacing: 8.0.mainAxisSpacing: 8.0,}).delegate: new SliverChildBuilderDelegate(
          function (context, index) {
            let recipe = this.recipes[index];
            let w = new RecipeCard({
              recipe: recipe,
              onTap: function () { showRecipePage(context, recipe); }});return w;
          },
          {
            childCount: this.recipes.length,
          }),
      }),
    });
  }
Copy the code

Project presentations

There is a fuller example in the source code, JSFlutter version of zhihu page, you can click here to view the code:

zhihu/home/home_page.js

Below is the corresponding UI, which is close to being used directly in the online version:

Contact us

Currently, MXFlutter is in Beta version. Due to the huge amount of work and limited manpower, there are still many things that need to be modified and optimized step by step. In the current high-speed iteration, if there is any problem during the process of using MXFlutter, you can add a group to the QQ group :747535761