Flutter动态功能插件dynamic的使用

动态功能插件dynamic

dynamic: 远程UI客户端插件，用于Flutter。

什么是远程UI？

什么是“远程UI”？为什么和什么时候使用它？

远程UI是一种跨平台的UI结构标准，因此你可以以更一致、更完整、更易于维护的方式进行开发。

远程UI的关键特性：

• 实时反映UI。
• 一次编写，跨所有平台运行（使用你最喜欢的框架）。
• 所有数据和逻辑都在服务器端。只发送UI数据。
• 逻辑集中化。代码更少，更容易维护。
• 原生性能。（不会影响性能）

远程UI的核心概念

几乎所有应用都会遵循以下步骤：

1. 应用定义（业务设计）。我们要做什么？为谁做？
2. 模型定义（数据模式设计）。我们需要获取哪些数据？我们应该向用户提供哪些数据？
3. UI设计（实际界面设计）。我们如何在屏幕上显示数据？表单将是什么样子？

远程UI是否适合所有人？

不是。 你不需要使用远程UI来制作你的应用。

由于我们的社区很小，你在开发生产级应用时可能会得到较少的支持和更多的麻烦。

它是如何工作的？

让我们通过一个名为“foodle”的食物卡车应用来了解其内部工作原理。

该框架由三层组成：

• 数据层（存储裸数据的数据层。可以想象为数据库）
• 布局数据层（将裸数据映射到视图的布局数据）
• 视图层（绘制布局数据的UI）

数据

var truckData = TruckData(
    name: "gony's burger",
    image: "https://~.jpg",
    shortDescription: "since 1999");

小部件与布局

注意：由于Flutter的小部件命名与远程UI的小部件命名相同，我们选择使用前缀标记“X”。例如，XText是远程UI的文本实例。

var truckItemLayout = (TruckData data) => TruckItemLayout(
    body: TruckItemBody(
        title: RU.Text(data.name),
        description: RU.Text(data.shortDescription),
        image: RU.Image(data.image),
        onTap: RU.Action(null)));

视图

var titleText = (BuildContext context, RU.Text text) => Text(
  text.content,
  style: Theme.of(context).textTheme.body2,
);

var descriptionText = (BuildContext context, RU.Text text) => Text(
  text.content,
  style: Theme.of(context).textTheme.overline,
);

var coverImage = (RU.Image image) => Image.network(
  image.src,
  height: 100.0,
  width: 140.0,
  fit: BoxFit.cover,
);

Function onTapAction = (RU.Action action) => {
  action.handle();
}

var truckItemView =
    (BuildContext context, TruckItemLayout layout) => GestureDetector(
        onTap: onTapAction(layout.body.onTap),
        child: Container(
          padding: EdgeInsets.only(left: 8, right: 8, top: 16, bottom: 16),
          width: 150,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              new ClipRRect(
                borderRadius: new BorderRadius.circular(2.0),
                child: coverImage(layout.body.image)
              ),
              titleText(context, layout.body.title),
              descriptionText(context, layout.body.description),
            ],
          ),
        ));

通过这种方式，你可以动态改变卡片中显示的内容，甚至可以在不更新应用的情况下更改卡片类型。你可以决定当卡片被点击时触发哪个动作。

理论上，如果所有场景都被预先定义好，你将永远不需要更新你的应用来进行应用更新。这将通过更改UI配置来神奇地实现。

如何贡献

该项目仍在开发中，尚未达到测试版状态。

如果你喜欢这个概念，并且喜欢我们正在尝试实现的目标，请随时联系我们进行贡献。

©2020 bridged XYZ. 开发自2019年9月

示例代码

以下是使用dynamic插件的完整示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_remote_ui_example/screen/demo/action/action_demo_screen.dart';
import 'package:flutter_remote_ui_example/screen/demo/foodle/foodle.dart';
import 'package:flutter_remote_ui_example/screen/demo/search_example/search_screen.dart';
import 'package:flutter_remote_ui_example/screen/demo/stile/stile_demo.dart';
import 'package:flutter_remote_ui_example/screen/demo/timeline/timeline_demo_screen.dart';
import 'package:flutter_remote_ui_example/screen/wallet_screen.dart';
import 'package:flutter_remote_ui_example/screen/demo/youtube/youtube.dart';
import 'package:flutter_remote_ui_example/utils/routes.dart';

import 'screen/icons_demo/icons_demo_screen.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'remote-ui',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: DemoHomePage.routeName,
      routes: buildRoute(context),
    );
  }
}

const List<DemoData> demos = [
  const DemoData(title: "remote icons", route: IconsDemoScreen.routeName),
  const DemoData(
      title: "Foodle",
      route: Foodle.routeName,
      cover: 'https://blog.luz.vc/wp-content/uploads/2019/01/food-truck-ou-food-container-2-696x356.jpg'),
  const DemoData(
      title: "Wallet",
      route: WalletDemo.routeName,
      cover: "https://www.loveworldplus.tv/wp-content/uploads/2019/04/bank.jpg"),
  const DemoData(
      title: "Youtube",
      route: YoutubeDemo.routeName,
      cover: "https://marketingland.com/wp-content/ml-loads/2017/08/youtube-logo-1920-800x450.jpg"),
  const DemoData(title: "Stile", route: StileDemo.routeName),
  const DemoData(title: "Timeline", route: TimelineDemoScreen.routeName),
  const DemoData(title: "Search results", route: SearchScreen.routeName),
  const DemoData(title: "Actions", route: ActionDemoScreen.routeName),
];

class DemoHomePage extends StatefulWidget {
  static const routeName = "/home";

  [@override](/user/override)
  _DemoHomePageState createState() => _DemoHomePageState();
}

class _DemoHomePageState extends State<DemoHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("select demo"),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [demoListBuilder()],
          ),
        ));
  }

  Widget demoListBuilder() {
    return ListView.builder(
      itemBuilder: (c, i) {
        var demo = demos[i];
        return DemoRow(
          title: Text(demo.title),
          cover: demo.cover != null
              ? Image.network(
                  demo.cover,
                  width: double.maxFinite,
                  fit: BoxFit.fitWidth,
                )
              : null,
          onTap: () {
            Navigator.of(context).pushNamed(demo.route);
          },
        );
      },
      itemCount: demos.length,
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
    );
  }
}

class DemoData {
  final String cover;
  final String title;
  final String route;

  const DemoData({this.cover, [@required](/user/required) this.title, [@required](/user/required) this.route});
}

class DemoRow extends StatelessWidget {
  final Function onTap;
  final Widget title;
  final Widget cover;

  const DemoRow({Key key, this.onTap, this.title, this.cover}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: onTap,
        child: Container(
          width: double.maxFinite,
          height: 200,
          child: Stack(
            children: [
              this.cover != null
                  ? this.cover
                  : Container(
                      color: Colors.blueAccent,
                    ),
              Positioned(left: 24, bottom: 24, child: _title(context))
            ],
          ),
        ));
  }

  Widget _title(BuildContext context) {
    return DefaultTextStyle(
      child: this.title,
      style: Theme.of(context).textTheme.headline2.copyWith(color: Colors.white),
    );
  }
}