LiveViewNativeFlutter.Dart (live_view_native_flutter v0.1.32)

Provides commands for executing Flutter operations on the client.

Inspired & partially copied from Phoenix.LiveView.JS

Summary

Functions

Goes back to the previous screen

Hides elements.

Pushes an event to the server.

Saves the current theme in the local storage of the app. When the app boots, the theme stored will be used

This opens the global bottom sheet at the top of the app.

Switches the app theme, the app theme is not saved locally, please see save_theme for saving the current theme.

Types

@opaque t()

Functions

Goes back to the previous screen

Link to this function

hide(opts \\ [])

Hides elements.

Options

  • :to - The optional DOM selector to hide. Defaults to the interacted element.
  • :transition - The string of classes to apply before hiding or a 3-tuple containing the transition class, the class to apply to start the transition, and the ending transition class, such as: {"ease-out duration-300", "opacity-100", "opacity-0"}
  • :time - The time to apply the transition from :transition. Defaults 200

During the process, the following events will be dispatched to the hidden elements:

  • When the action is triggered on the client, phx:hide-start is dispatched.
  • After the time specified by :time, phx:hide-end is dispatched.

Examples

<Container id="item">My Item</Container>

<ElevatedButton phx-click={JS.hide(to: "#item")}>
  hide!
</ElevatedButton>

<ElevatedButton phx-click={JS.hide(to: "#item", transition: "fade-out-scale")}>
  hide fancy!
</ElevatedButton>
Link to this function

hide(dart, opts)

See hide/1.

Pushes an event to the server.

  • event - The string event name to push.

Options

  • :target - The selector or component ID to push to. This value will overwrite any phx-target attribute present on the element.

Examples

<ElevatedButton phx-click={Dart.push("clicked")}>click me!</ElevatedButton>
Link to this function

push(event, opts)

See push/1.

Link to this function

push(exec, event, opts)

See push/1.

Link to this function

save_current_theme()

Link to this function

save_current_theme(exec)

Saves the current theme in the local storage of the app. When the app boots, the theme stored will be used

Examples

Dart.save_current_theme()
Link to this function

show(opts \\ [])

Link to this function

show(dart, opts)

See show/1.

Link to this function

show_bottom_sheet()

Link to this function

show_bottom_sheet(exec)

This opens the global bottom sheet at the top of the app.

Example:

this is a bottom sheet hello
Link to this function

switch_theme(mode)

Switches the app theme, the app theme is not saved locally, please see save_theme for saving the current theme.

  • theme (optional) - The theme to switch to (the default theme is named "default")
  • mode - light / dark / system The mode to switch the theme to (the default mode is "light")

Examples

Dart.switch_theme("dark")
Dart.switch_theme("default", "dark")
Dart.switch_theme("default", "system")
Link to this function

switch_theme(theme, mode)

Link to this function

switch_theme(exec, theme, mode)