dee_responsive_layout

Description:

dee responsive layout

Dee Responsive Layout #
dee_responsive_layout is a Flutter library for creating responsive layouts using a column system, similar to Bootstrap. It helps you create user interfaces that automatically adapt to different screen sizes.



Desktop
Tablet
Smartphone










Instalation #
Add the dependency to your file pubspec.yaml:
dependencies:
flutter:
sdk: flutter
dee_responsive_layout: #latest
copied to clipboard
Use #
Import the library into your Dart file:
import 'package:dee_responsive_layout/dee_responsive_layout.dart';
copied to clipboard
Example #
Here is a basic example of how to use DeeResponsiveLayout with DeeResponsiveColumn:
import 'package:flutter/material.dart';
import 'package:dee_responsive_layout/dee_responsive_layout.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Dee Responsive Layout Example')),
body: DeeResponsiveLayout(
children: [
DeeResponsiveColumn(
sm: 6,
md: 4,
lg: 3,
xl: 2,
child: Container(color: Colors.red, height: 100),
),
DeeResponsiveColumn(
sm: 6,
md: 4,
lg: 3,
xl: 2,
child: Container(color: Colors.green, height: 100),
),
DeeResponsiveColumn(
sm: 12,
md: 8,
lg: 6,
xl: 4,
child: Container(color: Colors.blue, height: 100),
),
],
),
),
);
}
}
copied to clipboard
Library Structure #
DeeResponsiveColumn #
DeeResponsiveColumn is used to define responsive columns.
DeeResponsiveColumn({
required Widget child,
int sm = 6,
int md = 8,
int lg = 10,
int xl = 12,
Alignment alignment = Alignment.topLeft,
});
copied to clipboard

child: The child widget that will be rendered inside the column.
sm: Number of columns on small screens.
md: Number of columns on medium screens.
lg: Number of columns on large screens.
xl: Number of columns on extra large screens.
alignment: The alignment of the widget inside the column.

DeeResponsiveLayout #
DeeResponsiveLayout is used to arrange the DeeResponsiveColumn in a responsive layout.
DeeResponsiveLayout({
required List<DeeResponsiveColumn> children,
});
copied to clipboard

children: List of DeeResponsiveColumn that will be arranged in the layout.

Internal Functions #

_getColumnCount: Calculates the number of columns based on the screen width.
_buildRows: Builds the rows (Row) of widgets (DeeResponsiveColumn), adjusting the number of columns and alignment.
_getRowAlignment: Converts the Alignment alignment to CrossAxisAlignment.

License #
This project is licensed under the MIT license - see the LICENSE file for more details.
Contribution #
Contributions are welcome! Please open an issue or submit a pull request.
Author #
Developed by Raphael Pontes.
Did I help you? Buy me a coffee.