Live View Native Flutter Client

Warning

This client is in beta, some features might be missing for your own app

APIs might break and features might be missing

A Flutter client for LiveView native. Join our Slack community

This repo enables you to create an app for any Flutter platform (mobile & desktop) where the full UI is synced to the backend and reflects any change being made, similar as a Live View web client.

Video Demos

Here is a demo of an Android, a Desktop and a web app synced on the same backend code:

demo-flutter-live-view.mp4

Here is a navigation and theme switching demo (the theme is also defined server side)

navigation.demo.mp4

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

Getting Started

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

What is there already?

• Some basic components are partially supported (Container, TextButton, Icon, AppBar, BottomNavigationBar ...)
• Modern Flutter Navigation with router 2.0 (switch pages, transitions go back). Although transitions aren't customizable yet.
• Basic styling (padding, margin and background)
• Basic forms (validation & submit)
• Dynamic attributes & replacement
• Conditional component rendering
• Material Icons
• Server-side themes with JSON, also you can switch & save theme on the server side
• Live reloading
• Responsive navigation
• Basic Images support
• Live Components
• Confirm modals
• Plugins to add your own custom components

What is missing?

• Documentation
• A full API support of all the components
• Hooks similar as web hooks
• Animations
• Local storage
• Better Image support & Video
• Responsive navigation & desktop support (like windows title)
• Sessions & Session storage events
• ...

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(%{format: :flutter} = assigns) do
    # This UI renders on flutter
    ~FLUTTER"""
      <flutter>
        <AppBar>
          <title>hello</title>
        </AppBar>
        <viewBody>
          <Container padding="10">
            <Container padding={10 + @counter} decoration={bg_color(@counter)}>
              <Text>Margin Counter <%= @counter %></Text>
              <ElevatedButton phx-click={Dart.go_back()}>go back</ElevatedButton>
            </Container>
            <Row>
              <ElevatedButton phx-click={Dart.switch_theme("dark")}>Switch dark theme</ElevatedButton>
              <Container margin="0 20 0 0">
                <ElevatedButton phx-click={Dart.switch_theme("light")}>Switch light theme</ElevatedButton>
              </Container>
            </Row>
          </Container>
        </viewBody>
        <BottomNavigationBar initialValue="0" selectedItemColor="blue-500">
          <BottomNavigationBarItem icon="home" label="Page 1" />
          <BottomNavigationBarItem live-patch="/second-page" icon="home" label="Page 2" />
          <BottomNavigationBarItem phx-click="inc" icon="arrow_upward" label="Increment" />
          <BottomNavigationBarItem phx-click="dec" icon="arrow_downward" label="Decrement" />
        </BottomNavigationBar>
      </flutter>
    """
  end