This file contains an explanation of the basic JSON structure for editing a slide presentation file. A presentation file is broken into the Root values, which contains a list of Slide objects, and each Slide contains a list of Content objects.

Each Slide object can optionally specify a number of Advancement Steps that must be reached before advancing to the next Slide.

Each Content object can optionally specify which step it is revealed on, and can have an optional Animation attached to it as well.

• Root Values
• Slide Object
• Content Object
  • Animation Object

Example

This is an example of a very simple slide presentation file. Below it we will review the values and how they play their part in defining a presentation.

This presentation has two Slides. The first Slide specifies that it has one Advancement Step, and three Content objects. One content object is revealed outright with no animation. The next two are revealed by advancing one step (spacebar or right arrow), and they are animated in. The second slide is blank.

{
  "slide_width": 1920.0,
  "slide_height": 1080.0,
  "font_scale_factor": 1920.0,
  "project_bg_color": "0xFFF0F0F0",
  "project_slide_list_bg_color": "0xFFDDDDDD",
  "project_slide_list_highlight_color": "0xFF40C4FF",
  "show_debug_containers": false,
  "animate_slide_transitions": false,
  "auto_advance": false,
  "auto_advance_duration_millis": 500,
  "slides": [
    {
      "bg_color": "#FFFFFFff",
      "advancement_count": 1,
      "content": [
        {
          "advancement_step": 0,
          "type": "rect",
          "fill": "0xFFA1CAF1",
          "x": 710.0,
          "y": 290.0,
          "height": 500.0,
          "width": 500.0
        },
        {
          "advancement_step": 1,
          "type": "rect",
          "fill": "0xFF000000",
          "x": 1060.0,
          "y": 340.0,
          "height": 100.0,
          "width": 100.0,
          "animation": {
            "curve": "easeOut",
            "duration_in_milliseconds": 3000,
            "opacity_start": 0.0
          }
        },
        {
          "advancement_step": 1,
          "type": "rect",
          "fill": "0xFF000000",
          "x": 750.0,
          "y": 340.0,
          "height": 100.0,
          "width": 100.0,
          "animation": {
            "curve": "easeOut",
            "duration_in_milliseconds": 3000,
            "opacity_start": 0.0
          }
        }
      ]
    },
    {
      "bg_color": "#FFFFFFff",
      "content": [
      ]
    }
  ]
}

Root Values

Values specified at the root of the JSON structure. The most important values are slide_width, slide_height, , font_scale_factor and slides. The rest of the values are just nice to haves.

• slide_width
• slide_height
• font_scale_factor
• project_bg_color
• project_slide_list_bg_color
• project_slide_list_highlight_color
• animate_slide_transitions
• dynamic_files_root
• show_debug_containers
• auto_advance
• auto_advance_duration_millis
• slides

slide_width

description: The width of the slide. This is a relative value, and together with the slide_height it will define the aspect ratio of your slide. It will also be what you use to position and size your content values, along with the slide_height.
type: number
default: 1920.0

slide_height

description: The height of the slide. This is a relative value, and together with the slide_width it will define the aspect ratio of your slide. It will also be what you use to position and size your content values, along with the slide_width.
type: number
default: 1080.0

font_scale_factor

description: The scale factor for fonts when the slide dimensions change on screen, i.e. when the window resizes, or when displaying on a different screen size. Defaults to the value specified for slide_width, and in general this seems to be the value that works best for maintaining consistent layouts regardless of the size of the slide on the screen.
type: number
default: The value specified for slide_width.

project_bg_color

description: The background color for the app, i.e. the color behind the slide.
type: String representing a color in 0xAARRGGBB or #RRGGBBAA format.
default: 0xFFF0F0F0

project_slide_list_bg_color

description: The background color for the slide list.
type: String representing a color in 0xAARRGGBB or #RRGGBBAA format.
default: 0xFFDDDDDD

project_slide_list_highlight_color

description: The color of the highlighted value in the slide list.
type: String representing a color in 0xAARRGGBB or #RRGGBBAA format.
default: 0xFF40C4FF

animate_slide_transitions

description: A boolean value that will animate all slide transitions if set to true
type: boolean
default: false

dynamic_files_root

description: The absolute path to the root of the dynamic files folder
type: string

show_debug_containers

description: A debug value to help visualize the position of elements on the screen. Useful for content with a transparent background, such as labels.
type: boolean
default: false

auto_advance

description: A boolean value that specifies whether the presentation should auto advance. This was created to stress test.
type: boolean
default: false

auto_advance_duration_millis

description: If auto_advance is set to true, this is the amount of time in milliseconds before it will auto advance.
type: int
default: 30000

slides

description: A list of Slide Objects
type: array of Slide Objects

Slide Object

Values specified for a Slide object

• bg_color
• advancement_count
• content

bg_color

description: The background color of the slide.
type: String representing a color in 0xAARRGGBB or #RRGGBBAA format.
default: 0xFFFFFFFF

advancement_count

description: The number of steps to advance before moving to the next slide. E.g., if you have an advancement_count of three, you would need to press the spacebar four times before the next slide would appear. Three times for each advancement step, and one more to advance to the next slide. This is primarily meant for revealing content, but can be used for other purposes as needed.
type: int
default: 0

content

description: A list of Content Objects
type: array of Content Objects

Content Object

A list of values specified in a Content Object. Depending on the type, these values can vary to some degree. But a Content Object must always specify an x, y, width, height, and type. Details on type-specific values can be found here

Content is laid out based on the x, y, width and height in relation to the slide_width and slide_height. The top left of a slide is (0.0, 0.0) and the bottom right is (slide_width, slide_height). Content will always be resized relative to the size of the slide on the screen. This is done to maintain the layout of a slide regardless of the display size. For example, if you specify a rect of size (100.0, 100.0) in the middle of the slide, and you resize the window, the rect will maintain it's relative position and size on the slide.

Note: If you create a custom content type, and you are doing some positioning/sizing within that content that isn't relative, you will need to do some extra work to get it to maintain the layout. There are numerous examples of this in the code, e.g. main_title_slide, flutter_pillars, supported_platforms, and more.

• type
• x
• y
• width
• height
• advancement_step
• animation

type

description: A string specifying the type of the content. If the content type hasn't been registered, the error content type is shown.
type: string

x

description: A value representing the x offset of the content relative to the slide_width specified in the root.
type: number

y

description: A value representing the y offset of the content relative to the slide_height specified in the root.
type: number

width

description: A value representing the width of the content to the slide_width specified in the root.
type: number

height

description: A value representing the height of the content relative to the slide_height specified in the root.
type: number

advancement_step

description: An optional int value representing at which step this content will be revealed. E.g., in the above example, the first content is revealed immediately (0th step), the second and third content are revealed on the 1st advancement step.
type: int
default: 0

animation

description: An optional Animation Object that specifies an animation when the content is revealed.
type: Animation Object

Animation Object

A list of values specified in an Animation Object. Animations are only run once and it is begun on the advancement step on which it is revealed.

• duration_in_milliseconds
• delay_in_milliseconds
• offset_x
• offset_y
• opacity_start
• opacity_end
• scale_start
• scale_end
• scale_align
• rotation
• curve

duration_in_milliseconds

description: Duration in milliseconds of the animation
type: int
default: 0

delay_in_milliseconds

description: Duration in milliseconds of the delay before the animation
type: int
default: 0

offset_x

description: The x offset that the animation will animate across, i.e, if your content x value is 100.0, and you specify this value has 100.0, the content will animate to 200.0.
type: number
default: 0.0

offset_y

description: The y offset that the animation will animate across, i.e, if your content y value is 100.0, and you specify this value has 100.0, the content will animate to 200.0.
type: number
default: 0.0

opacity_start

description: The starting value of the opacity for the animation.
type: number
default: 1.0

opacity_end

description: The ending value of the opacity for the animation.
type: number
default: 1.0

scale_start

description: The starting value of the scale for the animation.
type: number
default: 1.0

scale_end

description: The ending value of the scale for the animation.
type: number
default: 1.0

scale_align

description: The alignment for the scale animation. Must match one of the options available in the AlignUtils file.
type: string
default: center

rotation

description: A value for rotation that will elapse over the course of the animation. This value should be specified in degrees.
type: number
default: 0.0

curve

description: The curve for the animation. Must match one of the options available in the curve_utils.dart file.
type: string
default: linear