Live View Native Flutter Client

A Flutter client for LiveView native

⚠⚠ This client is a tech preview only, it’s not ready to be usable for your own project ⚠⚠

demo-flutter-live-view.mp4

Please see the announcement here: https://alex-min.fr/live-view-native-flutter-release/

Getting Started

  • Install Flutter
  • clone this repository in a folder
  • clone the demo live view flutter server
  • Use “flutter run” to run the client
  • You can modify the live view url in lib/main.dart, by default it uses localhost:4000 and 10.0.0.2:4000 for the android emulator

What is there already?

  • Some basic components are partially supported (Container, TextButton, Icon, AppBar …)
  • Basic styling (padding, margin and background)
  • Basic forms (validation & submit)
  • Dynamic attributes & replacement
  • Conditional components
  • Material Icons

What is missing?

  • Documentation
  • Navigation
  • A full API support of all the components
  • Themes
  • Modclasses (same as live view swift native)
  • Hooks
  • Animations
  • Better live reloading
  • …

As you see on this list, the client isn’t fully usable for a real app yet.

Philosophy

  • The Flutter client should support absolutely everything to make a real app
  • Users of this client should almost never dive into the flutter code, the client should be as complete and extensive as possible.
  • The client should be extendable in the future and available as a flutter package

What does the code looks like?

This is an example of the code on the server:

  @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

View Github