Live View 原生 Flutter 客户端

LiveView 原生的 Flutter 客户端

⚠⚠ 此客户端仅为技术预览版，尚未准备好用于您的项目 ⚠⚠

demo-flutter-live-view.mp4

请在此处查看公告： https://alex-min.fr/live-view-native-flutter-release/

入门

  • 安装 Flutter
  • 将此存储库克隆到一个文件夹中
  • 克隆 演示 LiveView Flutter 服务器
  • 使用“flutter run”运行客户端
  • 您可以在 lib/main.dart 中修改 live view 的 URL，默认情况下，它使用 localhost:4000，对于 Android 模拟器使用 10.0.0.2:4000

目前已支持什么？

  • 一些基本的组件已部分支持（Container, TextButton, Icon, AppBar …）
  • 基本样式（padding, margin 和 background）
  • 基本表单（验证 & 提交）
  • 动态属性 & 替换
  • 条件组件
  • Material 图标

还缺少什么？

  • 文档
  • 导航
  • 所有组件的完整 API 支持
  • 主题
  • Modclasses（与 live view swift native 相同）
  • Hooks
  • 动画
  • 更好的实时重新加载
  • …

正如您在此列表中看到的，该客户端尚未完全适用于实际应用程序。

理念

  • Flutter 客户端应支持一切，以构建真实的应用程序
  • 此客户端的用户几乎不应深入研究 flutter 代码，客户端应尽可能完整和广泛。
  • 该客户端应在未来可扩展，并作为 flutter 包提供

代码是什么样的？

这是服务器上代码的一个示例

  @impl true
  def render(%{platform_id: :flutterui} = assigns) do
    # This UI renders on flutter
    ~FLUTTERUI"""
    <Scaffold>
      <AppBar>
        <title>
          <Text>Hello Native</Text>
        </title>
        <leading>
        <Icon size="20" name="menu" />
        </leading>
      </AppBar>
      <Container padding={10 + @counter} decoration={bg_color(@counter)}>
        <Form phx-change="validate" phx-submit="save">
          <ListView>
            <Container decoration="background: white">
              <TextField decoration="fillColor: white; filled: true" name="myfield" value={"Current margin #{@counter}"}>
                <icon>
                  <Container decoration="background" padding="10">
                    <Icon size="20" name="key" />
                  </Container>
                </icon>
              </TextField>
            </Container>
            <Container decoration="background: white" margin="10 0 0 0">
              <TextField name="myfield2" decoration="fillColor: white; filled: true" value="Second field" />
            </Container>
            <Center>
              <Text style="textTheme: headlineMedium; fontWeight: bold; fontStyle: italic">
                Current Margin: <%= @counter %>
              </Text>
            </Center>
            <%= if rem(@counter, 2) == 1 do %>
              <Center><Text>the current margin is odd</Text></Center>
            <% else %>
              <Center><Text>the current margin is even</Text></Center>
            <% end %>
            <TextButton phx-click="inc">
              <Text>
                Increment margin
              </Text>
            </TextButton>
            <Container margin="10 0 0 0">
              <TextButton type="submit">
                <Text>
                  Submit form
                </Text>
              </TextButton>
            </Container>
            <Text><%= @form_field %></Text>
          </ListView>
        </Form>
      </Container>
    </Scaffold>
    """
  end

GitHub

查看 Github