Install Kraken CLI (macOS only currently)
Open with 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.
By contributing to Kraken, you agree that your contributions will be licensed under its Apache-2.0 License.
Prerequisites
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
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.
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(),
),
));
}
}
Author: openkraken.com
Official Website: https://pub.dev/packages/kraken