Frame Forge #

Description #

A Flutter package for creating dynamic UI layouts with a visual editor.

Motivation #

Change UI and data exchange with the client application server without code changes or app store updates. [admin-layout-photo]

Installation #

Add dependency to your pubspec.yaml:

dependencies:
  frame_forge: ^1.0.0

Usage #

Create DSL Model #

• Add required screen sizes for LayoutModel.
• Create controller

  final LayoutModel layoutModel = LayoutModel(
    screenSizes: [ScreenSizeEnum.mobile, ScreenSizeEnum.desktop],
  );
  
  late final LayoutModelController _layoutModelController =
      LayoutModelController(
        layoutModel: layoutModel,
        projectSaver: (map) async {
          // Configure project saving here
          return true;
        },
        projectLoader: (isSaved) async {
          /// Load model from file
          final FilePickerResult? result = await FilePicker.platform.pickFiles();
          if (result == null) return null;
          final PlatformFile file = result.files.first;
          return utf8.decode(file.bytes! as List<int>);
        },
      );

Main Components #

Output layout components:

Column(
  children: [
    Items(layoutModel.root, layoutModel),
  ],
),

Output layout data sources/variables:

Column(
  children: [
    Items(
        layoutModel.root.items
            .whereType<SourcePage>()
            .first, layoutModel,
    ),
  ],
),

Output layout styles:

Column(
  children: [
    Items(
        layoutModel.root.items
            .whereType<StylePage>()
            .first, layoutModel, 
    ),
  ],
),

Output layout processes:

Column(
  children: [
    ProcessItems(
        layoutModel.root.items
            .whereType<ProcessPage>()
            .first,layoutModel,
    ),
  ],
),

Output preview - how the page looks Make sure to specify screen size from [enum ScreenSizeEnum]

LayoutBuilder(
    builder: (context, constraints) {
        return Consumer<LayoutModel>(
            builder: (context, value, child) {
                return ComponentsAndSources(value,constraints, screenSize);
            },
        );
    }
),