flutter_dynamic_components 0.0.100 copy "flutter_dynamic_components: ^0.0.100" to clipboard
flutter_dynamic_components: ^0.0.100 copied to clipboard

create a dynamic Flutter screens based on backend-provided JSON configurations.

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 }

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");
              },
            );
          },
        ),
      ),
    );
  }
}

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.

1
likes
130
points
482
downloads

Publisher

verified publishernuaman.pro

Weekly Downloads

create a dynamic Flutter screens based on backend-provided JSON configurations.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

cached_network_image, carousel_slider, flutter, freezed_annotation, json_annotation

More

Packages that depend on flutter_dynamic_components