flutter_hybrid 0.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 76

中文文档

Introduction #

A flutter plugin for hybrid app, helps you integrate Flutter pages into iOS or Android app, influenced by flutter_boost.

The plugin's core role is hybrid page stack management, syncs lifecycles of native pages with flutter pages. Like H5 in app, all hybrid pages are identified by URI, compatible with various route solutions.

As a tool for hybrid page stack management, it must:

  • ensures consistent user experience of hybrid pages, it should be same as native pages.
  • ensures integrity of page's lifecycle, doesn't break page lifecycle related event tracks.
  • memory usage, performance, stability...

Integration #

Requirements #

  • flutter ^1.5.4

Add dependency to Flutter Module #

flutter_hybrid is a normal Flutter plugin:

flutter_hybrid: ^0.0.2

Or uses the github directly:

flutter_hybrid:
  git: git@github.com:mryt-app/flutter_hybrid.git
  ref: 0.0.2

Integration in Dart #

At first, register page builders, and replaces the builder of MaterialApp with FlutterHybrid.transitionBuilder(), then runs the flutter_hybrid.

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    FlutterHybrid.sharedInstance.registerPageBuilders({
      '/counter': (routeName, params, pageId) => CounterPage(pageId: pageId),
      '/colorPage': (routeName, params, pageId) => ColorPage(
          color: Color(params != null ? params['color'] : Colors.green.value),
          pageId: pageId),
      '/flutterPage': (routeName, params, _) => FlutterPage(),
    });
    FlutterHybrid.sharedInstance.startRun();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: FlutterHybrid.transitionBuilder(),
      home: Container(),
    );
  }
}

Integration in iOS host app #

First, your AppDelegate should inherites from FlutterAppDelegate, as normal Flutter app.

#import <Flutter/Flutter.h>
#import <UIKit/UIKit.h>

@interface AppDelegate : FlutterAppDelegate
@end

Then, creates a router class, which should implements FLHRouter, flutter_hybrid will asks it to deal with routing. Uses it to start running:

[FLHFlutterHybrid.sharedInstance startFlutterWithRouter:[Router sharedInstance]];

FLHRouter is very simple, open and close page:

@protocol FLHRouter <NSObject>

- (void)openPage:(NSString *)route
          params:(nullable NSDictionary *)params
        animated:(BOOL)animated
      completion:(nullable void (^)(BOOL finished))completion;

- (void)closePage:(NSString *)pageId
           params:(nullable NSDictionary *)params
         animated:(BOOL)animated
       completion:(nullable void (^)(BOOL finished))completion;

@end

Integration in Android host app #

Uses io.flutter.app.FlutterApplication as your application:

<application
        android:name="io.flutter.app.FlutterApplication"
        android:icon="@mipmap/ic_launcher"
        android:label="flutter_hybrid_example">

io.flutter.app.FlutterApplication is an android.app.Application that calls FlutterMain.startInitialization(this); in its onCreate method. In most cases you can leave this as-is, but if you want to provide additional functionalities, it is fine to subclass or reimplement FlutterApplication.

Init flutter_hybrid in MainActivity, it shoulds inherite from FlutterActivity:

class MainActivity : FlutterActivity(), View.OnClickListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Init FlutterHybrid
        FlutterHybridPlugin.instance.init(object : IAppInfo {

            override fun getApplication(): Application {
                return application
            }

            override fun startActivity(context: Context?, routeName: String, params: Map<*, *>?): Boolean {
                return RouterUtil.openPageByUrl(context ?: this@MainActivity, routeName, params)
            }

            override fun isDebug(): Boolean {
                // The return value depends on whether it is a Debug package.
                return true
            }
        })

        setContentView(R.layout.main_activity)
        initView()
        // Register Flutter plugins
        GeneratedPluginRegistrant.registerWith(this)
    }
}

Basic usage #

Open a Flutter page in iOS native page #

There are two ViewControllers:

  • FLHFlutterContainerViewController: Add sole FlutterViewController as its childViewController, snapshots to avoid empty page on transition.
  • FLHFlutterHybridViewController: Subclass of FlutterViewController.

Warning: Two types of viewController couldn't be used in an app, you should always use one type.

FLHFlutterContainerViewController *flutterVC = [[FLHFlutterContainerViewController alloc] initWithRoute:route params:params];
[self.navigationController pushViewController:flutterVC animated:animated];

Or:

FLHFlutterHybridViewController *flutterVC = [[FLHFlutterHybridViewController alloc] initWithRoute:route params:params];
[self.navigationController pushViewController:flutterVC animated:animated];

route is the page name registered in Dart, params is parameters needed to create flutter page.

Open a Flutter page in Android native page #

Activity:

context?.let {
            val intent = Intent(context, FHFlutterActivity::class.java)
            intent.putExtra(Messager.ROUTE_NAME, routeName)
            if (params != null && params.isNotEmpty()) {
                intent.putExtra(Messager.PARAMS, params as Serializable)
            }
            it.startActivity(intent)
        }

Fragment:

class FlutterFragmentActivity : AppCompatActivity() {

    private lateinit var mFragment: FHFlutterFragment

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.flutter_fragment)

        mFragment = FHFlutterFragment.instance()

        supportFragmentManager
                .beginTransaction()
                .replace(R.id.fragment_container, mFragment)
                .commit()
    }
    
    override fun onBackPressed() {
        FlutterHybridPlugin.instance.getContainerManager().onBackPressed(mFragment as IFlutterViewContainer)
    }
}

Open or close hybrid page in Dart #

// Open page
FlutterHybrid.sharedInstance.router.openPage('/counter',
                      params: {
                        ShowPageTYpe.PAGE_TYPE: ShowPageTYpe.expectedPageType
                      });

// Close page
FlutterHybrid.sharedInstance.router.closePage(pageId, params);

// You can call Navigator.pop to close flutter or hybrid page directly.
Navigator.pop(context);

All hybrid flutter pages are managed by custom Navigator, it pops Flutter route or closes page by calling native.

0.0.1 #

  • Supports integrate flutter pages into iOS or Android app.

0.0.2 #

  • Add LICENSE
  • Add README of English edition

example/README.md

flutter_hybrid_example #

Demonstrates how to use the flutter_hybrid plugin.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_hybrid: ^0.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_hybrid/flutter_hybrid.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
57
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
76
Learn more about scoring.

We analyzed this package on Dec 7, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.6

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/flutter_hybrid.dart.

Run flutter format to format lib/flutter_hybrid.dart.

Format lib/messaging/native_messenger.dart.

Run flutter format to format lib/messaging/native_messenger.dart.

Format lib/messaging/native_messenger_proxy.dart.

Run flutter format to format lib/messaging/native_messenger_proxy.dart.

Fix additional 8 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/messaging/native_navigation_messenger.dart (Run flutter format to format lib/messaging/native_navigation_messenger.dart.)
  • lib/messaging/native_page_lifecycle_messenger.dart (Run flutter format to format lib/messaging/native_page_lifecycle_messenger.dart.)
  • lib/page/hybrid_page.dart (Run flutter format to format lib/page/hybrid_page.dart.)
  • lib/page/hybrid_page_container.dart (Run flutter format to format lib/page/hybrid_page_container.dart.)
  • lib/page/hybrid_page_coordinator.dart (Run flutter format to format lib/page/hybrid_page_coordinator.dart.)
  • lib/page/hybrid_page_observer.dart (Run flutter format to format lib/page/hybrid_page_observer.dart.)
  • lib/router/router.dart (Run flutter format to format lib/router/router.dart.)
  • lib/support/logger.dart (Run flutter format to format lib/support/logger.dart.)

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test