Flutter高性能渲染插件Kraken的使用

Kraken

Kraken

快速尝试

安装Kraken CLI（仅限macOS和Linux）

$ npm i @openkraken/cli -g

使用Kraken打开

$ kraken run https://raw.githubusercontent.com/openkraken/kraken/master/kraken/example/assets/bundle.js

为什么选择Kraken

快速开发 🎉

与Web标准兼容意味着你无需更改现有的技术栈。

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

跨平台 ⚛️

无缝集成到Flutter，支持Web、移动（iOS、Android）和桌面（MacOS、Linux、Windows）。

高性能 🚀

提供接近原生的性能，如导航、动画和无限滚动列表。

Flutter版本范围

仅对稳定版的Flutter进行了全面测试。

贡献

通过贡献Kraken，您同意您的贡献将根据其Apache-2.0许可证进行授权。

阅读我们的贡献指南，让我们一起构建更好的Kraken项目。

感谢所有为Kraken做出贡献的人！

版权所有 © 2019年至今，Kraken作者。

示例代码

/*
 * Copyright (C) 2022-present The Kraken authors. All rights reserved.
 */
import 'package:flutter/material.dart';
import 'package:kraken/kraken.dart';
import 'package:kraken/devtools.dart';
import 'package:kraken_websocket/kraken_websocket.dart';

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

class MyApp extends StatelessWidget {
  // 这个widget是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kraken浏览器',
      home: MyBrowser(),
    );
  }
}

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

  // 这个widget是你的应用的主页。它是有状态的，意味着它有一个状态对象（定义在下面），这些状态会影响它的外观。
  
  // 这个类是状态的配置。它保存了由父组件（在这个例子中是App widget）提供的值（在这个例子中是标题）并用于状态的构建方法。Widget子类中的字段总是标记为"final"。

  final String? title;

  [@override](/user/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](/user/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?.load(KrakenBundle.fromUrl(value));
            },
            decoration: InputDecoration(
              hintText: '输入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),
          ),
        ),
      );

    final Size viewportSize = queryData.size;
    return Scaffold(
        appBar: appBar,
        body: Center(
        child: _kraken = Kraken(
          devToolsService: ChromeDevToolsService(),
          viewportWidth: viewportSize.width - queryData.padding.horizontal,
          viewportHeight: viewportSize.height - appBar.preferredSize.height - queryData.padding.vertical,
          bundle: KrakenBundle.fromUrl('assets:assets/bundle.html'),
        ),
    ));
  }
}