### Flutter App Setup with Stac

Source: https://github.com/stacdev/stac/blob/dev/website/docs/intro.md

This snippet shows the basic structure of a Flutter application using the Stac library. It initializes the StacApp with a title and theme, and sets up the home screen to load content from a network request.

```dart
import 'package:flutter/material.dart';
import 'package:stac/stac.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StacApp(
      title: 'Stac Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Stac.fromNetwork(
        StacNetworkRequest(
          url: _url, // Assuming _url is defined elsewhere
          method: Method.get,
        ),
      ),
    );
  }
}

```

--------------------------------

### Add Stac Dependency

Source: https://github.com/stacdev/stac/blob/dev/website/docs/intro.md

Installs the Stac package into your Flutter project by adding it to the pubspec.yaml file. This command automatically runs `flutter pub get`.

```bash
flutter pub add stac
```

--------------------------------

### Installation Rules for Application Bundle

Source: https://github.com/stacdev/stac/blob/dev/examples/counter_example/linux/CMakeLists.txt

Defines the installation process for the application bundle, including setting the installation prefix, cleaning the build directory, and installing the executable, data files, libraries, and assets.

```cmake
set(BUILD_BUNDLE_DIR "${PROJECT_BINARY_DIR}/bundle")
if(CMAKE_INSTALL_PREFIX_INITIALIZED_TO_DEFAULT)
  set(CMAKE_INSTALL_PREFIX "${BUILD_BUNDLE_DIR}" CACHE PATH "..." FORCE)
endif()

install(CODE "
  file(REMOVE_RECURSE \"${BUILD_BUNDLE_DIR}/\")
  " COMPONENT Runtime)

set(INSTALL_BUNDLE_DATA_DIR "${CMAKE_INSTALL_PREFIX}/data")
set(INSTALL_BUNDLE_LIB_DIR "${CMAKE_INSTALL_PREFIX}/lib")

install(TARGETS ${BINARY_NAME} RUNTIME DESTINATION "${CMAKE_INSTALL_PREFIX}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_ICU_DATA_FILE}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
  COMPONENT Runtime)

foreach(bundled_library ${PLUGIN_BUNDLED_LIBRARIES})
  install(FILES "${bundled_library}"
    DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
    COMPONENT Runtime)
endforeach(bundled_library)

set(NATIVE_ASSETS_DIR "${PROJECT_BUILD_DIR}native_assets/linux/")
install(DIRECTORY "${NATIVE_ASSETS_DIR}"
   DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
   COMPONENT Runtime)

set(FLUTTER_ASSET_DIR_NAME "flutter_assets")
install(CODE "
  file(REMOVE_RECURSE \"${INSTALL_BUNDLE_DATA_DIR}/${FLUTTER_ASSET_DIR_NAME}\")
  " COMPONENT Runtime)
install(DIRECTORY "${PROJECT_BUILD_DIR}/${FLUTTER_ASSET_DIR_NAME}"
  DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime)

if(NOT CMAKE_BUILD_TYPE MATCHES "Debug")
  install(FILES "${AOT_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
    COMPONENT Runtime)
endif()
```

--------------------------------

### CMake Project Setup and Configuration

Source: https://github.com/stacdev/stac/blob/dev/examples/counter_example/linux/CMakeLists.txt

Sets up the CMake project, defines the minimum required version, project name, and executable name. It also configures application ID, modern CMake behaviors, and installation paths.

```cmake
cmake_minimum_required(VERSION 3.13)
project(runner LANGUAGES CXX)

set(BINARY_NAME "counter_example")
set(APPLICATION_ID "com.example.counter_example")

cmake_policy(SET CMP0063 NEW)
set(CMAKE_INSTALL_RPATH "$ORIGIN/lib")

if(FLUTTER_TARGET_PLATFORM_SYSROOT)
  set(CMAKE_SYSROOT ${FLUTTER_TARGET_PLATFORM_SYSROOT})
  set(CMAKE_FIND_ROOT_PATH ${CMAKE_SYSROOT})
  set(CMAKE_FIND_ROOT_PATH_MODE_PROGRAM NEVER)
  set(CMAKE_FIND_ROOT_PATH_MODE_PACKAGE ONLY)
  set(CMAKE_FIND_ROOT_PATH_MODE_LIBRARY ONLY)
  set(CMAKE_FIND_ROOT_PATH_MODE_INCLUDE ONLY)
endif()

if(NOT CMAKE_BUILD_TYPE AND NOT CMAKE_CONFIGURATION_TYPES)
  set(CMAKE_BUILD_TYPE "Debug" CACHE
    STRING "Flutter build mode" FORCE)
  set_property(CACHE CMAKE_BUILD_TYPE PROPERTY STRINGS
    "Debug" "Profile" "Release")
endif()
```

--------------------------------

### CMake Project Setup and Configuration

Source: https://github.com/stacdev/stac/blob/dev/examples/movie_app/linux/CMakeLists.txt

Defines the minimum CMake version, project name, executable name, and application ID. It also sets up modern CMake policies and installation paths.

```cmake
cmake_minimum_required(VERSION 3.13)
project(runner LANGUAGES CXX)

set(BINARY_NAME "movie_app")
set(APPLICATION_ID "com.example.movie_app")

cmake_policy(SET CMP0063 NEW)
set(CMAKE_INSTALL_RPATH "$ORIGIN/lib")
```

--------------------------------

### Start Local Development Server

Source: https://github.com/stacdev/stac/blob/dev/website/README.md

Starts a local development server for the Stac framework. Changes are reflected live without requiring a server restart.

```bash
$ npm run start
```

--------------------------------

### Installation Rules for Executable and Assets

Source: https://github.com/stacdev/stac/blob/dev/examples/counter_example/windows/CMakeLists.txt

Defines how the project's executable, libraries, and assets are installed, including runtime destinations and handling of bundled libraries and native assets.

```cmake
set(BUILD_BUNDLE_DIR "$<TARGET_FILE_DIR:${BINARY_NAME}>")
set(CMAKE_VS_INCLUDE_INSTALL_TO_DEFAULT_BUILD 1)
if(CMAKE_INSTALL_PREFIX_INITIALIZED_TO_DEFAULT)
  set(CMAKE_INSTALL_PREFIX "${BUILD_BUNDLE_DIR}" CACHE PATH "..." FORCE)
endif()

set(INSTALL_BUNDLE_DATA_DIR "${CMAKE_INSTALL_PREFIX}/data")
set(INSTALL_BUNDLE_LIB_DIR "${CMAKE_INSTALL_PREFIX}")

install(TARGETS ${BINARY_NAME} RUNTIME DESTINATION "${CMAKE_INSTALL_PREFIX}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_ICU_DATA_FILE}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
  COMPONENT Runtime)

if(PLUGIN_BUNDLED_LIBRARIES)
  install(FILES "${PLUGIN_BUNDLED_LIBRARIES}"
    DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
    COMPONENT Runtime)
endif()

set(NATIVE_ASSETS_DIR "${PROJECT_BUILD_DIR}native_assets/windows/")
install(DIRECTORY "${NATIVE_ASSETS_DIR}"
   DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
   COMPONENT Runtime)

set(FLUTTER_ASSET_DIR_NAME "flutter_assets")
install(CODE "
  file(REMOVE_RECURSE \"${INSTALL_BUNDLE_DATA_DIR}/${FLUTTER_ASSET_DIR_NAME}\")
  " COMPONENT Runtime)
install(DIRECTORY "${PROJECT_BUILD_DIR}/${FLUTTER_ASSET_DIR_NAME}"
  DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime)

install(FILES "${AOT_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  CONFIGURATIONS Profile;Release
  COMPONENT Runtime)
```

--------------------------------

### Install Dependencies

Source: https://github.com/stacdev/stac/blob/dev/packages/stac_logger/example/README.md

This command is used to fetch and install the dependencies listed in the `pubspec.yaml` file, including the newly added stac_logger package.

```bash
flutter pub get
```

--------------------------------

### CMake Project Setup and Configuration

Source: https://github.com/stacdev/stac/blob/dev/examples/stac_gallery/linux/CMakeLists.txt

Defines the minimum CMake version, project name, and application identifier. It also sets up modern CMake behaviors and installation paths for bundled libraries.

```cmake
cmake_minimum_required(VERSION 3.10)
project(runner LANGUAGES CXX)

set(BINARY_NAME "stac_gallery")
set(APPLICATION_ID "com.stac.stac_gallery")

cmake_policy(SET CMP0063 NEW)
set(CMAKE_INSTALL_RPATH "$ORIGIN/lib")
```

--------------------------------

### Render UI from Network

Source: https://github.com/stacdev/stac/blob/dev/website/docs/intro.md

Renders the UI from a JSON file fetched from a network URL using `Stac.fromNetwork`. It requires a `StacNetworkRequest` object containing the URL and the build context.

```dart
  @override
  Widget build(BuildContext context) {
  return MaterialApp(
    title: 'StacDemo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: Stac.fromNetwork(
      request: StacNetworkRequest(
        url: 'https://example.com/ui.json',
      ), 
      context: context,
    ),
  );
}
```

--------------------------------

### Add Stac Dependency (YAML)

Source: https://github.com/stacdev/stac/blob/dev/website/docs/intro.md

Manually adds the Stac dependency to the `pubspec.yaml` file. Replace `<latest-version>` with the actual latest version number found on pub.dev.

```yaml
dependencies:
  stac: ^<latest-version>
```

--------------------------------

### Installation Rules for Windows Executable

Source: https://github.com/stacdev/stac/blob/dev/examples/movie_app/windows/CMakeLists.txt

Configures the installation process for the application on Windows. It sets the installation prefix to the executable's directory, installs the main executable, ICU data, Flutter library, bundled libraries, native assets, and Flutter assets. The AOT library is installed only for Profile and Release builds.

```cmake
set(BUILD_BUNDLE_DIR "$<TARGET_FILE_DIR:${BINARY_NAME}>")
set(CMAKE_VS_INCLUDE_INSTALL_TO_DEFAULT_BUILD 1)
if(CMAKE_INSTALL_PREFIX_INITIALIZED_TO_DEFAULT)
  set(CMAKE_INSTALL_PREFIX "${BUILD_BUNDLE_DIR}" CACHE PATH "..." FORCE)
endif()

set(INSTALL_BUNDLE_DATA_DIR "${CMAKE_INSTALL_PREFIX}/data")
set(INSTALL_BUNDLE_LIB_DIR "${CMAKE_INSTALL_PREFIX}")

install(TARGETS ${BINARY_NAME} RUNTIME DESTINATION "${CMAKE_INSTALL_PREFIX}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_ICU_DATA_FILE}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
  COMPONENT Runtime)

if(PLUGIN_BUNDLED_LIBRARIES)
  install(FILES "${PLUGIN_BUNDLED_LIBRARIES}"
    DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
    COMPONENT Runtime)
endif()

set(NATIVE_ASSETS_DIR "${PROJECT_BUILD_DIR}native_assets/windows/")
install(DIRECTORY "${NATIVE_ASSETS_DIR}"
   DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
   COMPONENT Runtime)

set(FLUTTER_ASSET_DIR_NAME "flutter_assets")
install(CODE "
  file(REMOVE_RECURSE \"${INSTALL_BUNDLE_DATA_DIR}/${FLUTTER_ASSET_DIR_NAME}\")
  " COMPONENT Runtime)
install(DIRECTORY "${PROJECT_BUILD_DIR}/${FLUTTER_ASSET_DIR_NAME}"
  DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime)

install(FILES "${AOT_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  CONFIGURATIONS Profile;Release
  COMPONENT Runtime)
```

--------------------------------

### Installation Bundle Configuration

Source: https://github.com/stacdev/stac/blob/dev/examples/movie_app/linux/CMakeLists.txt

Configures the installation process to create a relocatable bundle in the build directory, setting the install prefix and defining data and library directories.

```cmake
set(BUILD_BUNDLE_DIR "${PROJECT_BINARY_DIR}/bundle")
if(CMAKE_INSTALL_PREFIX_INITIALIZED_TO_DEFAULT)
  set(CMAKE_INSTALL_PREFIX "${BUILD_BUNDLE_DIR}" CACHE PATH "..." FORCE)
endif()

install(CODE "
  file(REMOVE_RECURSE \"${BUILD_BUNDLE_DIR}/\")
  " COMPONENT Runtime)

set(INSTALL_BUNDLE_DATA_DIR "${CMAKE_INSTALL_PREFIX}/data")
set(INSTALL_BUNDLE_LIB_DIR "${CMAKE_INSTALL_PREFIX}/lib")
```

--------------------------------

### Install Application Executable and Libraries

Source: https://github.com/stacdev/stac/blob/dev/examples/movie_app/linux/CMakeLists.txt

Installs the application executable, ICU data file, Flutter library, and bundled plugin libraries into the installation bundle.

```cmake
install(TARGETS ${BINARY_NAME} RUNTIME DESTINATION "${CMAKE_INSTALL_PREFIX}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_ICU_DATA_FILE}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
  COMPONENT Runtime)

foreach(bundled_library ${PLUGIN_BUNDLED_LIBRARIES})
  install(FILES "${bundled_library}"
    DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
    COMPONENT Runtime)
endforeach(bundled_library)
```

--------------------------------

### Installation Rules for Application Bundle

Source: https://github.com/stacdev/stac/blob/dev/examples/stac_gallery/linux/CMakeLists.txt

Configures the installation process to create a relocatable application bundle, including copying the executable, ICU data, Flutter library, bundled libraries, and assets.

```cmake
set(BUILD_BUNDLE_DIR "${PROJECT_BINARY_DIR}/bundle")
if(CMAKE_INSTALL_PREFIX_INITIALIZED_TO_DEFAULT)
  set(CMAKE_INSTALL_PREFIX "${BUILD_BUNDLE_DIR}" CACHE PATH "..." FORCE)
endif()

install(CODE "
  file(REMOVE_RECURSE \"${BUILD_BUNDLE_DIR}/\")
  " COMPONENT Runtime)

set(INSTALL_BUNDLE_DATA_DIR "${CMAKE_INSTALL_PREFIX}/data")
set(INSTALL_BUNDLE_LIB_DIR "${CMAKE_INSTALL_PREFIX}/lib")

install(TARGETS ${BINARY_NAME} RUNTIME DESTINATION "${CMAKE_INSTALL_PREFIX}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_ICU_DATA_FILE}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
  COMPONENT Runtime)

foreach(bundled_library ${PLUGIN_BUNDLED_LIBRARIES})
  install(FILES "${bundled_library}"
    DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
    COMPONENT Runtime)
endforeach(bundled_library)

set(FLUTTER_ASSET_DIR_NAME "flutter_assets")
install(CODE "
  file(REMOVE_RECURSE \"${INSTALL_BUNDLE_DATA_DIR}/${FLUTTER_ASSET_DIR_NAME}\")
  " COMPONENT Runtime)
install(DIRECTORY "${PROJECT_BUILD_DIR}/${FLUTTER_ASSET_DIR_NAME}"
  DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime)
```

--------------------------------

### Multi Action JSON Example

Source: https://github.com/stacdev/stac/blob/dev/website/docs/actions/multi_action.md

An example JSON structure demonstrating how to use StacMultiAction to chain a snackbar display, a network request, and another snackbar display.

```json
{
  "actionType": "multiAction",
  "sync": true,
  "actions": [
    {
        "actionType": "showSnackBar",
        "content": {
            "type": "text",
            "data": "Executing request..."
        },
        "action": {
            "label": "Done",
            "textColor": "#73C2FB",
            "onPressed": {}
        },
        "behavior": "floating"
    },
    {
        "actionType": "networkRequest",
        "url": "https://example.com/api",
        "method": "get",
        "queryParameters": {
            "page": 1
        },
        "headers": {
            "Authorization": "Bearer token"
        },
        "contentType": "application/json",
        "body": {
            "data": "example"
        },
        "results": [
            {
            "statusCode": 200,
            "action": {
                "actionType": "none"
            }
            },
            {
            "statusCode": 404,
            "action": {
                "actionType": "none"
            }
            }
        ]
    },
    {
        "actionType": "showSnackBar",
        "content": {
            "type": "text",
            "data": "Request executed"
        },
        "action": {
            "label": "Done",
            "textColor": "#73C2FB",
            "onPressed": {}
        },
        "behavior": "floating"
    }
  ]
}
```

--------------------------------

### Stac WebView JSON Configuration Example

Source: https://github.com/stacdev/stac/blob/dev/website/docs/widgets/webview.md

An example of the JSON structure used to configure and display a Stac WebView widget, specifying the type and the URL to be loaded.

```json
{
  "type": "webView",
  "url": "https://github.com/StacDev/stac"
}
```

--------------------------------

### Initialize Stac

Source: https://github.com/stacdev/stac/blob/dev/website/docs/intro.md

Initializes the Stac framework in the main function of your Flutter application. This setup is necessary before Stac can be used to render UI.

```dart
void main() async {
  await Stac.initialize();
  runApp(const MyApp());
}
```

--------------------------------

### Get Form Value Action JSON Example

Source: https://github.com/stacdev/stac/blob/dev/website/docs/actions/get_form_value.md

An example JSON payload demonstrating the structure for the Get Form Value Action, specifying the action type and the ID of the form field to retrieve.

```json
{
  "actionType": "getFormValue",
  "id": "username"
}
```

--------------------------------

### Cloning and Branching for Contribution

Source: https://github.com/stacdev/stac/blob/dev/CONTRIBUTING.md

Steps to fork the Stac repository, clone it locally, and create a new branch for making changes. This is the initial setup for contributing code.

```bash
git clone https://github.com/<your-username>/stac.git
cd stac
git checkout -b <branch-name>
```

--------------------------------

### Import Stac Package

Source: https://github.com/stacdev/stac/blob/dev/website/docs/intro.md

Imports the Stac package into your Dart file, making its classes and functions available for use in your Flutter application.

```dart
import 'package:stac/stac.dart';
```

--------------------------------

### Initialize Stac with StacWebViewParser

Source: https://github.com/stacdev/stac/blob/dev/packages/stac_webview/example/README.md

Demonstrates how to initialize the Stac SDK and include `StacWebViewParser` in the list of parsers.

```dart
void main() async {
  await Stac.initialize(
    parsers: const [
      StacWebViewParser(),
    ],
  );

  runApp(const MyApp());
}
```

--------------------------------

### Render UI from JSON Object

Source: https://github.com/stacdev/stac/blob/dev/website/docs/intro.md

Renders the UI directly from a JSON object using `Stac.fromJson`. This method takes the JSON data and the build context as arguments.

```dart
import 'package:flutter/material.dart';
import 'package:stac/stac.dart';

void main() async {
  await Stac.initialize();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StacDemo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Stac.fromJson(json, context),
    );
  }
}
```

--------------------------------

### CMake Project Setup and Configuration

Source: https://github.com/stacdev/stac/blob/dev/examples/counter_example/windows/CMakeLists.txt

Sets up the CMake project, defines the binary name, and configures build types (Debug, Profile, Release). It also includes standard compiler settings and options for Unicode support.

```cmake
cmake_minimum_required(VERSION 3.14)
project(counter_example LANGUAGES CXX)

set(BINARY_NAME "counter_example")

cmake_policy(VERSION 3.14...3.25)

get_property(IS_MULTICONFIG GLOBAL PROPERTY GENERATOR_IS_MULTI_CONFIG)
if(IS_MULTICONFIG)
  set(CMAKE_CONFIGURATION_TYPES "Debug;Profile;Release"
    CACHE STRING "" FORCE)
else()
  if(NOT CMAKE_BUILD_TYPE AND NOT CMAKE_CONFIGURATION_TYPES)
    set(CMAKE_BUILD_TYPE "Debug" CACHE
      STRING "Flutter build mode" FORCE)
    set_property(CACHE CMAKE_BUILD_TYPE PROPERTY STRINGS
      "Debug" "Profile" "Release")
  endif()
endif()

set(CMAKE_EXE_LINKER_FLAGS_PROFILE "${CMAKE_EXE_LINKER_FLAGS_RELEASE}")
set(CMAKE_SHARED_LINKER_FLAGS_PROFILE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE}")
set(CMAKE_C_FLAGS_PROFILE "${CMAKE_C_FLAGS_RELEASE}")
set(CMAKE_CXX_FLAGS_PROFILE "${CMAKE_CXX_FLAGS_RELEASE}")

add_definitions(-DUNICODE -D_UNICODE)
```

--------------------------------

### Render UI from Assets

Source: https://github.com/stacdev/stac/blob/dev/website/docs/intro.md

Renders the UI from a JSON file located in the assets folder of your Flutter project using `Stac.fromAsset`. It requires the asset path and the build context.

```dart
  @override
  Widget build(BuildContext context) {
  return MaterialApp(
    title: 'StacDemo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: Stac.fromAsset('assets/ui.json', context),
  );
}
```

--------------------------------

### Stac Positioned Widget with Directional Type

Source: https://github.com/stacdev/stac/blob/dev/website/docs/widgets/positioned.md

This example demonstrates how to use the `directional` positionedType. It utilizes `start` and `end` properties along with `textDirection` for layout, suitable for responsive designs.

```json
{
  "type": "positioned",
  "positionedType": "directional",
  "start": 10,
  "top": 20,
  "width": 100,
  "height": 50,
  "textDirection": "ltr",
  "child": {
    "type": "text",
    "data": "Hello, World!"
  }
}
```

--------------------------------

### Example AppBar JSON Configuration

Source: https://github.com/stacdev/stac/blob/dev/website/docs/widgets/app_bar.md

A JSON configuration example for creating a Flutter AppBar. This demonstrates how to set the title, background and foreground colors, and include action buttons like search and settings.

```json
{
  "type": "appBar",
  "title": {
    "type": "text",
    "data": "App Bar Title"
  },
  "backgroundColor": "#FFFFFF",
  "foregroundColor": "#000000",
  "actions": [
    {
      "type": "iconButton",
      "icon": {
        "type": "icon",
        "icon": "search"
      }
    },
    {
      "type": "iconButton",
      "icon": {
        "type": "icon",
        "icon": "settings"
      }
    }
  ]
}
```

--------------------------------

### Import STAC Framework

Source: https://github.com/stacdev/stac/blob/dev/packages/stac_framework/example/README.md

Import the necessary STAC framework library at the beginning of your Dart parser file.

```dart
import 'package:stac_framework/stac_framework.dart';
```

--------------------------------

### Flutter StacApp Initialization

Source: https://github.com/stacdev/stac/blob/dev/packages/stac/README.md

Demonstrates how to initialize a Flutter application using StacApp, setting up the title, theme, and the main Stac widget for displaying UI from a network request.

```dart
import 'package:flutter/material.dart';
import 'package:stac/stac.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StacApp(
      title: 'Stac Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Stac.fromNetwork(
        StacNetworkRequest(
          url: _url,
          method: Method.get,
        ),
      ),
    );
  }
}
```

--------------------------------

### JSON Structure for UI Elements

Source: https://github.com/stacdev/stac/blob/dev/website/docs/intro.md

This JSON represents a UI structure that could be rendered by a Server-Driven UI framework like Stac. It defines various widgets such as text fields, buttons, and layout elements with their properties and styling.

```json
{
  "type": "column",
  "children": [
    {
      "type": "textField",
      "maxLines": 1,
      "keyboardType": "text",
      "textInputAction": "next",
      "textAlign": "start",
      "textCapitalization": "none",
      "textDirection": "ltr",
      "textAlignVertical": "top",
      "obscureText": false,
      "cursorColor": "#FC3F1B",
      "style": {
        "color": "#000000"
      },
      "decoration": {
        "filled": true,
        "suffixIcon": {
          "type": "icon",
          "iconType": "cupertino",
          "icon": "eye",
          "size": 24
        },
        "hintStyle": {
          "color": "#797979"
        },
        "labelText": "Password*",
        "fillColor": "#F2F2F2"
      },
      "readOnly": false,
      "enabled": true
    },
    {
      "type": "sizedBox",
      "height": 24
    },
    {
      "type": "textField",
      "maxLines": 1,
      "keyboardType": "text",
      "textInputAction": "done",
      "textAlign": "start",
      "textCapitalization": "none",
      "textDirection": "ltr",
      "textAlignVertical": "top",
      "obscureText": true,
      "cursorColor": "#FC3F1B",
      "style": {
        "color": "#000000"
      },
      "decoration": {
        "filled": true,
        "suffixIcon": {
          "type": "icon",
          "iconType": "cupertino",
          "icon": "eye",
          "size": 24
        },
        "hintStyle": {
          "color": "#797979"
        },
        "labelText": "Re-type password*",
        "fillColor": "#F2F2F2"
      },
      "readOnly": false,
      "enabled": true
    },
    {
      "type": "sizedBox",
      "height": 48
    },
    {
      "type": "elevatedButton",
      "child": {
        "type": "text",
        "data": "Submit"
      },
      "style": {
        "backgroundColor": "#4D00E9",
        "padding": {
          "top": 8,
          "left": 12,
          "right": 12,
          "bottom": 8
        }
      },
      "onPressed": {}
    }
  ]
}

```

--------------------------------

### NetworkWidget Example JSON

Source: https://github.com/stacdev/stac/blob/dev/website/docs/widgets/network_widget.md

This JSON structure demonstrates how to configure the NetworkWidget, including the URL, HTTP method, and headers for the network request.

```json
{
  "type": "networkWidget",
  "request": {
    "url": "https://api.example.com/data",
    "method": "get",
    "headers": {
      "Authorization": "Bearer token"
    }
  }
}
```

--------------------------------

### JSON Data Structure for UI Elements

Source: https://github.com/stacdev/stac/blob/dev/website/docs/intro.md

This JSON structure defines various UI elements, including app bars, text fields, and layout containers. It specifies properties like text content, styling, input types, and decorations for each element.

```json
{
  "type": "scaffold",
  "appBar": {
    "type": "appBar",
    "title": {
      "type": "text",
      "data": "Text Field",
      "style": {
        "color": "#ffffff",
        "fontSize": 21
      }
    },
    "backgroundColor": "#4D00E9"
  },
  "backgroundColor": "#ffffff",
  "body": {
    "type": "singleChildScrollView",
    "child": {
      "type": "container",
      "padding": {
        "left": 12,
        "right": 12,
        "top": 12,
        "bottom": 12
      },
      "child": {
        "type": "column",
        "mainAxisAlignment": "center",
        "crossAxisAlignment": "center",
        "children": [
          {
            "type": "sizedBox",
            "height": 24
          },
          {
            "type": "textField",
            "maxLines": 1,
            "keyboardType": "text",
            "textInputAction": "done",
            "textAlign": "start",
            "textCapitalization": "none",
            "textDirection": "ltr",
            "textAlignVertical": "top",
            "obscureText": false,
            "cursorColor": "#FC3F1B",
            "style": {
              "color": "#000000"
            },
            "decoration": {
              "hintText": "What do people call you?",
              "filled": true,
              "icon": {
                "type": "icon",
                "iconType": "cupertino",
                "icon": "person_solid",
                "size": 24
              },
              "hintStyle": {
                "color": "#797979"
              },
              "labelText": "Name*",
              "fillColor": "#F2F2F2"
            },
            "readOnly": false,
            "enabled": true
          },
          {
            "type": "sizedBox",
            "height": 24
          },
          {
            "type": "textField",
            "maxLines": 1,
            "keyboardType": "text",
            "textInputAction": "done",
            "textAlign": "start",
            "textCapitalization": "none",
            "textDirection": "ltr",
            "textAlignVertical": "top",
            "obscureText": false,
            "cursorColor": "#FC3F1B",
            "style": {
              "color": "#000000"
            },
            "decoration": {
              "hintText": "Where can we reach you?",
              "filled": true,
              "icon": {
                "type": "icon",
                "iconType": "cupertino",
                "icon": "phone_solid",
                "size": 24
              },
              "hintStyle": {
                "color": "#797979"
              },
              "labelText": "Phone number*",
              "fillColor": "#F2F2F2"
            },
            "readOnly": false,
            "enabled": true
          },
          {
            "type": "sizedBox",
            "height": 24
          },
          {
            "type": "textField",
            "maxLines": 1,
            "keyboardType": "text",
            "textInputAction": "done",
            "textAlign": "start",
            "textCapitalization": "none",
            "textDirection": "ltr",
            "textAlignVertical": "top",
            "obscureText": false,
            "cursorColor": "#FC3F1B",
            "style": {
              "color": "#000000"
            },
            "decoration": {
              "hintText": "Your email address",
              "filled": true,
              "icon": {
                "type": "icon",
                "iconType": "material",
                "icon": "email",
                "size": 24
              },
              "hintStyle": {
                "color": "#797979"
              },
              "labelText": "Email",
              "fillColor": "#F2F2F2"
            },
            "readOnly": false,
            "enabled": true
          },
          {
            "type": "sizedBox",
            "height": 24
          },
          {
            "type": "sizedBox",
            "height": 100,
            "child": {
              "type": "textField",
              "expands": true,
              "cursorColor": "#FC3F1B",
              "style": {
                "color": "#000000"
              },
              "decoration": {
                "filled": true,
                "hintStyle": {
                  "color": "#797979"
                },
                "labelText": "Life story",
                "fillColor": "#F2F2F2"
              },
              "readOnly": false,
              "enabled": true
            }
          },
          {
            "type": "sizedBox",
            "height": 24
          },
          {
            "type": "textField",
            "maxLines": 1,
            "keyboardType": "text",
            "textInputAction": "done",
            "textAlign": "start",
            "textCapitalization": "none",
            "textDirection": "ltr",
            "textAlignVertical": "top",
            "obscureText": true,
            "cursorColor": "#FC3F1B",
            "style": {
              "color": "#000000"
            }
          }
        ]
      }
    }
  }
}
```

--------------------------------

### Flutter Library Setup

Source: https://github.com/stacdev/stac/blob/dev/examples/counter_example/windows/flutter/CMakeLists.txt

Configures the Flutter library, including its DLL, header files, and linking. It sets up include directories and dependencies for the Flutter library.

```cmake
set(FLUTTER_LIBRARY "${EPHEMERAL_DIR}/flutter_windows.dll")

# Published to parent scope for install step.
set(FLUTTER_LIBRARY ${FLUTTER_LIBRARY} PARENT_SCOPE)
set(FLUTTER_ICU_DATA_FILE "${EPHEMERAL_DIR}/icudtl.dat" PARENT_SCOPE)
set(PROJECT_BUILD_DIR "${PROJECT_DIR}/build/" PARENT_SCOPE)
set(AOT_LIBRARY "${PROJECT_DIR}/build/windows/app.so" PARENT_SCOPE)

list(APPEND FLUTTER_LIBRARY_HEADERS
  "flutter_export.h"
  "flutter_windows.h"
  "flutter_messenger.h"
  "flutter_plugin_registrar.h"
  "flutter_texture_registrar.h"
)
list(TRANSFORM FLUTTER_LIBRARY_HEADERS PREPEND "${EPHEMERAL_DIR}/")
add_library(flutter INTERFACE)
target_include_directories(flutter INTERFACE
  "${EPHEMERAL_DIR}"
)
target_link_libraries(flutter INTERFACE "${FLUTTER_LIBRARY}.lib")
add_dependencies(flutter flutter_assemble)
```

--------------------------------

### Install Native Assets

Source: https://github.com/stacdev/stac/blob/dev/examples/movie_app/linux/CMakeLists.txt

Installs native assets provided by build.dart into the installation bundle's library directory.

```cmake
set(NATIVE_ASSETS_DIR "${PROJECT_BUILD_DIR}native_assets/linux/")
install(DIRECTORY "${NATIVE_ASSETS_DIR}"
   DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
   COMPONENT Runtime)
```

--------------------------------

### BottomNavigationView Example

Source: https://github.com/stacdev/stac/blob/dev/website/docs/widgets/bottom_navigation_bar.md

A JSON configuration demonstrating the usage of the BottomNavigationView widget, including its structure and the associated bottom navigation bar items with icons and labels.

```json
{
  "type": "defaultBottomNavigationController",
  "length": 3,
  "child": {
    "type": "scaffold",
    "appBar": {
      "type": "appBar",
      "title": {
        "type": "text",
        "data": "Bottom Navigation Screen"
      }
    },
    "body": {
      "type": "bottomNavigationView",
      "children": [
        {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Home",
            "style": {
              "fontSize": 24
            }
          }
        },
        {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Search",
            "style": {
              "fontSize": 24
            }
          }
        },
        {
          "type": "center",
          "child": {
            "type": "text",
            "data": "Profile",
            "style": {
              "fontSize": 24
            }
          }
        }
      ]
    },
    "bottomNavigationBar": {
      "type": "bottomNavigationBar",
      "items": [
        {
          "type": "navigationBarItem",
          "label": "Home",
          "icon": {
            "type": "icon",
            "iconType": "material",
            "icon": "home"
          }
        },
        {
          "type": "navigationBarItem",
          "label": "Search",
          "icon": {
            "type": "icon",
            "iconType": "material",
            "icon": "search"
          }
        },
        {
          "type": "navigationBarItem",
          "label": "Profile",
          "icon": {
            "type": "icon",
            "iconType": "material",
            "icon": "account_circle"
          }
        }
      ]
    }
  }
}
```

--------------------------------

### Install Flutter Assets

Source: https://github.com/stacdev/stac/blob/dev/examples/movie_app/linux/CMakeLists.txt

Installs the Flutter assets directory into the installation bundle, ensuring it's cleared and re-copied on each build.

```cmake
set(FLUTTER_ASSET_DIR_NAME "flutter_assets")
install(CODE "
  file(REMOVE_RECURSE \"${INSTALL_BUNDLE_DATA_DIR}/${FLUTTER_ASSET_DIR_NAME}\")
  " COMPONENT Runtime)
install(DIRECTORY "${PROJECT_BUILD_DIR}/${FLUTTER_ASSET_DIR_NAME}"
  DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime)
```

--------------------------------

### Initialize Custom Action Parser

Source: https://github.com/stacdev/stac/blob/dev/packages/stac_framework/example/README.md

Extend `StacActionParser` to create a custom action parser for handling actions.

```dart
class StacActionPraser  extends StacActionParser<dynamic> {
    ... 
}
```

--------------------------------

### List Rendering with itemTemplate

Source: https://github.com/stacdev/stac/blob/dev/website/docs/widgets/dynamic_view.md

An example demonstrating how to use the dynamicView widget to fetch a list of users and render each user item using a specified itemTemplate.

```json
{
  "type": "dynamicView",
  "request": {
    "url": "https://dummyjson.com/users",
    "method": "get"
  },
  "targetPath": "users",
  "template": {
    "type": "listView",
    "itemTemplate": {
      "type": "listTile",
      "title": {
        "type": "text",
        "data": "{{firstName}} {{lastName}}"
      },
      "subtitle": {
        "type": "text",
        "data": "{{email}}"
      },
      "leading": {
        "type": "circleAvatar",
        "backgroundImage": "{{image}}"
      }
    }
  }
}
```

--------------------------------

### Running Tests

Source: https://github.com/stacdev/stac/blob/dev/CONTRIBUTING.md

Command to execute the test suite for the Stac project. Ensures that new code changes do not introduce regressions.

```bash
flutter test
```

--------------------------------

### Install AOT Library (Non-Debug Builds)

Source: https://github.com/stacdev/stac/blob/dev/examples/stac_gallery/linux/CMakeLists.txt

This snippet demonstrates how to install the AOT library on non-Debug builds using CMake. It ensures the library is installed to the correct destination directory as a Runtime component.

```cmake
# Install the AOT library on non-Debug builds only.
if(NOT CMAKE_BUILD_TYPE MATCHES "Debug")
  install(FILES "${AOT_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
    COMPONENT Runtime)
endif()
```

--------------------------------

### Flutter Web App Loader

Source: https://github.com/stacdev/stac/blob/dev/examples/stac_gallery/web/index.html

This snippet demonstrates how the Flutter web application is loaded. It includes service worker configuration and engine initialization.

```javascript
var serviceWorkerVersion = null;
window.addEventListener('load', function(ev) {
  // Download main.dart.js
  _flutter.loader.loadEntrypoint({
    serviceWorker: {
      serviceWorkerVersion: serviceWorkerVersion,
    },
    onEntrypointLoaded: function(engineInitializer) {
      engineInitializer.initializeEngine().then(function(appRunner) {
        appRunner.runApp();
      });
    }
  });
});
```

--------------------------------

### Example JSON for Limited Box

Source: https://github.com/stacdev/stac/blob/dev/website/docs/widgets/limited_box.md

Provides JSON examples for creating Flutter LimitedBox widgets. The first example shows a LimitedBox with default constraints, and the second demonstrates custom maxHeight and maxWidth.

```json
{
  "type": "limitedBox",
  "child": {
    "type": "container",
    "width": 100,
    "height": 100,
    "color": "#FF0000"
  }
}
```

```json
{
  "type": "limitedBox",
  "maxHeight": 200.0,
  "maxWidth": 300.0,
  "child": {
    "type": "text",
    "data": "Hello, World! from Limited Box",
    "style": {
      "fontSize": 16,
      "color": "#000000"
    }
  }
}
```