flexiflow

Available Languages

Flexiflow is a library that enables the creation of responsive flows in your application, providing adaptable variations for various types of devices and screens.

About

Flexiflow is based on the idea of employing a foundational design as a reference point for creating responsive flows. From this fundamental design, the library enables the generation of adaptable variations for different devices such as mobile phones, tablets, and desktops. Additionally, Flexiflow adjusts the size of widgets according to various screen sizes, maintaining a constant proportion to the original design.

With Flexiflow, you gain the ability to easily develop a responsive flow for your application, eliminating the need for complex calculations and enhancing code readability. The flexibility of the library allows you to create specific variations for each type of device, resulting in a responsive flow that efficiently adapts to a variety of screen sizes. This contributes to a unique user experience, optimally tailored for each device.

Installation

To install Flexiflow, add the following dependency to your pubspec.yaml file:

dependencies:
  flexiflow: ^VERSION

Replace the VERSION tag with the latest version of the package. You can find the most recent version of Flexiflow on the package page on Pub.dev.

After that, run the flutter pub get command to download the project dependencies.

Now, simply import Flexiflow into your project and start enjoying the benefits of simple and fast responsiveness:

import 'package:flexiflow/flexiflow.dart';

Usage

Flexiflow is divided into two distinct parts: "Flexi" and "Flow". The term "Flexi" comes from flexibility, and it is responsible for providing responsiveness to your widgets. Meanwhile, the "Flow" portion, derived from the word flow, takes on the responsibility of creating variations tailored to various types of devices.

Responsiveness

To make your widgets responsive, the first step is to incorporate the Flexiflow widget into your application. The Flexiflow plays a crucial role in establishing the foundational design for your application, serving as a reference point for creating responsive flows. For this initial setup, simply provide the dimensions of the foundational design through the designSize parameter:

void main() {
  runApp(
    FlexiFlow(
      designSize: Size(1920, 1080),
      child: const MyApp(),
    ),
  );
}

After this step, you can make your widgets responsive using the extensions provided by the package. To do this, simply use the variable corresponding to the desired type of responsiveness, assigning a numeric value to it:

final double width = 100.w;
final double height = 100.h;
final double fontSize = 100.sp;

Flexiflow offers seven distinct types of responsiveness, each adjusting in a specific way:

• w or width: Responsive to the width of the foundational design.
• h or height: Responsive to the height of the foundational design.
• sp: Responsive to the font size of the foundational design.
• dp: Responsive to the device's pixel density.
• wPerc or widthPercentage: Responsive to the percentage of the foundational design's width.
• hPerc or heightPercentage: Responsive to the percentage of the foundational design's height.
• sqr or squared: Responsive to the smaller dimension of the foundational design, often used to create square widgets.

Additionally, Flexiflow provides the flexibility to set minimum and maximum limits for responsiveness through the min and max parameters:

final double width = 100.limW(min: 50, max: 200);
final double height = 100.limH(min: 50, max: 200);
final double fontSize = 100.limSp(min: 50, max: 200);

This is especially useful to prevent responsiveness values from becoming excessively small or large, thus providing a better user experience.

The optional min and max parameters can be applied to the following extensions:

• limW or limitedWidth: Limits responsiveness in relation to the width of the foundational design.
• limH or limitedHeight: Establishes limits for responsiveness in relation to the height of the foundational design.
• limSp or limitedSp: Sets limits for responsiveness in relation to the font size of the foundational design.
• limDp or limitedDp: Controls responsiveness in relation to the device's pixel density.
• limWPerc or limitedWidthPercentage: Imposes limits on responsiveness in relation to the percentage of the foundational design's width.
• limHPerc or limitedHeightPercentage: Regulates responsiveness in relation to the percentage of the foundational design's height.
• limSqr or limitedSquared: Applies limits to responsiveness in relation to the smaller dimension of the foundational design, often used to maintain widgets in a square format.

Flow

To create variations tailored to different types of devices, the FlowScreen widget is the ideal tool. This widget takes on the responsibility of generating specific variants for mobile phones, tablets, and desktops, providing an optimized experience on each platform.

FlowScreen(
    mobileChild: const MobileScreen(),
    tabletChild: const TabletScreen(),
    desktopChild: const DesktopScreen(),
),

If you want to create custom variations beyond those offered by FlowScreen, the IFlow interface provides the necessary flexibility. To implement your own flow, simply create a class that extends the IFlow interface and override the getCurrentFlow and getCurrentType methods.

class CustomFlow extends IFlow<DevicesTypes> {

  CustomFlow({
    required BuildContext context,
    required Widget mobileChild,
    required Widget tabletChild,
    required Widget desktopChild,
  })
      : _context = context,
        _mobileChild = mobileChild,
        _tabletChild = tabletChild,
        _desktopChild = desktopChild;

  final BuildContext _context;
  final Widget _mobileChild;
  final Widget _tabletChild;
  final Widget _desktopChild;

  @override
  Widget getCurrentFlow(DevicesTypes type) {
    return switch (type) {
      DevicesTypes.mobile => _mobileChild,
      DevicesTypes.tablet => _tabletChild,
      DevicesTypes.desktop => _desktopChild
    };
  }

  @override
  DevicesTypes getCurrentType() {
    final size = MediaQuery.sizeOf(_context);
    if (size.width < 600) {
      return DevicesTypes.mobile;
    } else if (size.width < 1024) {
      return DevicesTypes.tablet;
    } else {
      return DevicesTypes.desktop;
    }
  }

After creating your custom class that extends the IFlow interface, it's easy to integrate it into the FlowBuilder. Simply pass an instance of this class as an argument to the flow parameter of the FlowBuilder:

FlowBuilder(
    flow: CustomFlow(
        context: context,
        mobileChild: const MobileScreen(),
        tabletChild: const TabletScreen(),
        desktopChild: const DesktopScreen(),
    ),
),

Remember that customizing your flow can be done in a very flexible manner, allowing even the user to make their own customizations.

Examples

To view practical examples of Flexiflow usage, visit our Flow Lab.

Contributing

Contributions are always welcome! If you'd like to contribute to Flexiflow, feel free to visit our GitHub repository.

Bugs and Suggestions

You can report bugs and suggest new features in our issues.

License

Flexiflow is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgements

We thank Arthur Goelzer for the artistic contributions used in the project's README.