Morioh
Login
Flutter Dev

Flutter Dev

3 years ago

Kraken | A High-Performance, Web Standards-Compliant Rendering Engine

Install Kraken CLI (macOS only currently)

Open with kraken

💌 Why kraken

Quick development 🎉

Compatibility with web standards means you don't have to change your stack.

Cross platform ⚛️

Seamless integration with Flutter, supports web, mobile (iOS, Android) and desktop (MacOS, Linux, Windows).

Fast performance 🚀

Provide native-like performance such as navigation, animation and infinite list scrolling.

👏 Contributing

By contributing to Kraken, you agree that your contributions will be licensed under its Apache-2.0 License.

Prerequisites

  • Node.js v12.0 or later
  • Flutter version in the kraken/pubspec.yaml
  • CMake v3.2.0 or later
  • Xcode (10.12) or later (Running on macOS or iOS)
  • Android NDK version 21.4.7075529 (Running on Android)

Install

Building bridge

Building bridge for all supported platform (macOS, iOS, Android)

Building bridge for one platform

macOS

iOS

Android

For Windows users, make sure that running this command under MINGW64 environment(eg. Git Bash).

Start example

Test (Unit Test and Integration Test)

 $ npm test

 $ cd kraken/example
 $ flutter run

 $ npm run build:bridge:android

 $ npm run build:bridge:ios

 $ npm run build:bridge:macos

 $ npm run build:bridge:all

 $ npm install

const text = document.createTextNode('Hello World!');
document.body.appendChild(text);

 # kraken [localfile|URL]
 $ kraken https://raw.githubusercontent.com/openkraken/kraken/master/kraken/example/assets/bundle.js

 $ npm i @openkraken/cli -g

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add kraken

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  kraken: ^0.8.2

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

Import it

Now in your Dart code, you can use:

import 'package:kraken/kraken.dart';

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:kraken/kraken.dart';
import 'package:kraken_websocket/kraken_websocket.dart';
import 'package:kraken_devtools/kraken_devtools.dart';
import 'dart:ui';

void main() {
  KrakenWebsocket.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kraken Browser',
      // theme: ThemeData.dark(),
      home: MyBrowser(),
    );
  }
}

class MyBrowser extends StatefulWidget {
  MyBrowser({Key? key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyBrowser> {

  OutlineInputBorder outlineBorder = OutlineInputBorder(
    borderSide: BorderSide(color: Colors.transparent, width: 0.0),
    borderRadius: const BorderRadius.all(
      Radius.circular(20.0),
    ),
  );

  @override
  Widget build(BuildContext context) {
    final MediaQueryData queryData = MediaQuery.of(context);
    final TextEditingController textEditingController = TextEditingController();

    Kraken? _kraken;
    AppBar appBar = AppBar(
        backgroundColor: Colors.black87,
        titleSpacing: 10.0,
        title: Container(
          height: 40.0,
          child: TextField(
            controller: textEditingController,
            onSubmitted: (value) {
              textEditingController.text = value;
              _kraken?.loadURL(value);
            },
            decoration: InputDecoration(
              hintText: 'Enter a app url',
              hintStyle: TextStyle(color: Colors.black54, fontSize: 16.0),
              contentPadding: const EdgeInsets.all(10.0),
              filled: true,
              fillColor: Colors.grey,
              border: outlineBorder,
              focusedBorder: outlineBorder,
              enabledBorder: outlineBorder,
            ),
            style: TextStyle(color: Colors.black, fontSize: 16.0),
          ),
        ),
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
      );

    final Size viewportSize = queryData.size;
    return Scaffold(
        appBar: appBar,
        body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: _kraken = Kraken(
          viewportWidth: viewportSize.width - queryData.padding.horizontal,
          viewportHeight: viewportSize.height - appBar.preferredSize.height - queryData.padding.vertical,
          bundlePath: 'assets/bundle.js',
          devToolsService: ChromeDevToolsService(),
        ),
    ));
  }
}

Download Details:

 

Author: openkraken.com

Official Website: https://pub.dev/packages/kraken 

6.65 GEEK