Responsive Mixin Layout #

The Flutter Responsive Layout package provides an easy way to create responsive layouts in Flutter that adapt to different screen sizes. It allows you to customize the appearance of your Flutter applications on mobile devices, tablets, desktops, and TVs.

Features #

• Adapt your application's content based on the device's screen size.
• Provides custom widgets for mobile devices, tablets, desktops, and TVs.
• Easy to use and integrate into your existing Flutter application.

Getting Started #

Make sure you have Flutter installed on your machine. For more information on how to install Flutter, please refer to the official Flutter documentation.

Installation #

Add the following dependency to your pubspec.yaml:

dependencies: 
  responsive_mixin_layout: ^1.0.2

Then, run the command flutter pub get to get the dependencies.

Setup #

Wrap your materialApp with [ScreenSizes] widget, you can configure globally screen width and height values in this widget

ScreenSizes(
  child: MaterialApp(
    theme: ThemeApp.of(context),
    navigatorKey: navigatorKey,
    debugShowCheckedModeBanner: false,
  ),
)

Usage #

Here is a basic example of how to use the Flutter Responsive Mixin Layout package:

class HomePage extends StatelessWidget with ResponsiveLayoutMixin {
  const HomePage({super.key});

  @override
  Widget? desktopLayout(BuildContext context, BoxConstraints constraints) {
    return const Scaffold(
      body: _Page1(),
    );
  }

  @override
  Widget tabletLayout(BuildContext context, BoxConstraints constraints) {
    return Scaffold(
      body: PageView(
        children: const [
          _Page1(),
        ],
      ),
    );
  }
}

You can also use the ResponsiveLayout

import 'package:flutter/material.dart'; 
import 'package:responsive_mixin_layout/responsive_mixin_layout.dart'; 
 
void main() { 
  runApp(MyApp()); 
} 
 
class MyApp extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return ResponsiveLayout( 
      mobile: (context, constraints) { 
        // Widget para dispositivos móviles 
        return Container( 
          color: Colors.red, 
          child: Text('Mobile Layout'), 
        ); 
      }, 
      tablet: (context, constraints) { 
        // Widget para tabletas 
        return Container( 
          color: Colors.blue, 
          child: Text('Tablet Layout'), 
        ); 
      }, 
      desktop: (context, constraints) { 
        // Widget para escritorios 
        return Container( 
          color: Colors.green, 
          child: Text('Desktop Layout'), 
        ); 
      }, 
      tv: (context, constraints) { 
        // Widget para televisores 
        return Container( 
          color: Colors.yellow, 
          child: Text('TV Layout'), 
        ); 
      }, 
    ); 
  } 
}

RenderBoxBuilder #

A widget that provides access to the RenderBox of its child widget and triggers a callback.

Example usage: #

RenderBoxBuilder(
  child: YourWidget(),
  onRenderBox: (context, renderBox) {
    // Handle the RenderBox
    print('RenderBox size: ${renderBox.size}');
  },
)

BoxSizeListener #

A widget that listens for size changes of its child widget and triggers a callback.

Example usage: #

BoxSizeListener(
  child: YourWidget(),
  onSizeChanged: () {
    // Handle size change
    print('Size changed');
  },
)

ScreenSizeListener #

A widget that listens for screen size changes and triggers a callback.

Example usage: #

ScreenSizeListener(
  child: YourWidget(),
  onSizeChanged: (newSize) {
    // Handle screen size change
    print('Screen size changed: $newSize');
  },
)

TextScalerBuilder #

A widget that provides a custom text scaling factor based on the screen size.

Example usage: #

TextScalerBuilder(
  child: YourWidget(),
  scaler: (context, media) {
    // Calculate the scaling factor based on the screen size
    return media.size.width / 400.0;
  },
)

DoubleExtension #

An extension for the double class that provides additional utility methods.

Methods: #

• clampInverted(double lowerLimit, double upperLimit): Returns this double clamped to be in the range [lowerLimit]-[upperLimit] but inverted.

• clampMapRanged({bool invert = false, required double minRange, required double maxRange, required double minValue, required double maxValue}): Maps the value from one range to another and optionally inverts the result.

Example usage: #

extension DoubleExtension on double {
  // Returns this [num] clamped to be in the range [lowerLimit]-[upperLimit] but inverted.
  double clampInverted(double lowerLimit, double upperLimit) =>
      lowerLimit + upperLimit - clamp(lowerLimit, upperLimit);

  // Map the value from one range to another
  double clampMapRanged({
    bool invert = false,
    required double minRange,
    required double maxRange,
    required double minValue,
    required double maxValue,
  }) {
    double mappedValue =
        ((this - minRange) / (maxRange - minRange)) * (maxValue - minValue) +
            minValue;

    // Make sure the mapped value is within the minValue and maxValue ranges
    mappedValue = mappedValue.clamp(minValue, maxValue);

    // Inverts return values if invert is specified as true
    return invert ? maxValue + minValue - mappedValue : mappedValue;
  }
}

// Example usage
void main() {
  double value = 5.0;
  double clampedInverted = value.clampInverted(1.0, 10.0);
  double mappedValue = value.clampMapRanged(
    minRange: 0.0,
    maxRange: 10.0,
    minValue: 100.0,
    maxValue: 200.0,
  );

  print('Clamped Inverted: $clampedInverted');
  print('Mapped Value: $mappedValue');
}

Contribution #

Contributions are welcome. If you find any issues or have any suggestions for improvement, you can open an issue or submit a pull request on the GitHub repository.

Support #

If you have any questions or need additional help, you can contact the development team at [email protected].