Skip to content

Latest commit

 

History

History
105 lines (84 loc) · 4.08 KB

README.md

File metadata and controls

105 lines (84 loc) · 4.08 KB
Raw

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