flutter_dynamic_components

Description:

flutter dynamic components

Flutter Dynamic Components #
The Flutter Dynamic Components package enables the creation of dynamic Flutter screens based on backend-provided JSON configurations. With this powerful tool, developers can define UI elements through JSON, including sliders, text blocks, images, and category views. This approach greatly accelerates UI development and iteration, allowing for quick updates without needing app redeployment.
Features #

Dynamic UI Creation: Effortlessly build screens from JSON configurations.
Support for Various Components: Includes support for sliders, text sections, buttons, and category views directly from JSON.
Flexible Component Properties: Customize padding, border radius, and other properties via JSON.
Efficient Image Loading: Utilizes cached_network_image for optimized image loading and caching.
Enhanced Sliders: Leverages carousel_slider for flexible and responsive image sliders.
Easy JSON Serialization: Supports json_annotation for straightforward JSON serialization, with build_runner and json_serializable aiding in code generation.

Installation #
To integrate the Flutter Dynamic Components package into your project, add it to your pubspec.yaml file along with its dependencies:
dependencies:
flutter_dynamic_components: { version }
copied to clipboard
Usage #
Begin by defining your screen's UI components and their properties in a JSON configuration according to the predefined schema.
Here's a basic usage example to help you get started:
import 'package:flutter/material.dart';
import 'package:flutter_dynamic_components/flutter_dynamic_components.dart';


class YourDynamicScreen extends StatelessWidget {
final List<PropertyBase> properties = // a dart representation of the json properties from the server

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Builder(
builder: (context) {
return ComponentsManager(
properties: properties,
componentsProperties: ComponentsProperties(
sliderBorderRadius: 12.0,
componentsPadding: const EdgeInsets.all(0),
carouselOptions: CarouselOptions(
height: 195,
aspectRatio: 1.5 / 3,
enlargeCenterPage: true,
autoPlay: true,
),
),
onSliderCardClicked: (image) {
print("Card clicked: $image");
},
);
},
),
),
);
}
}
copied to clipboard
Maintained Packages #

Image Caching: cached_network_image
Carousel Slider: carousel_slider
Model Serialization: freezed_annotation, json_annotation
Code Generation: build_runner, freezed, json_serializable (under dev_dependencies)

Contributing #
We warmly welcome contributions! Feel free to submit pull requests or create issues for bugs, features, or suggestions.
License #
This project is licensed under the MIT License. See the LICENSE file for more details.