layout_pro

Description:

layout pro

Layout Pro #
A Flutter package that simplifies the creation of responsive GridView layouts.
Features #

Create responsive GridView layouts with ease.
Automatically adapts to different screen sizes.
Provides flexibility in configuring the number of items per row and aspect ratios.

Preview #

Getting started #
To use this package in your Flutter project, follow these steps:


Add the following dependency to your pubspec.yaml file:
dependencies:
layout_pro: # Use the latest version
copied to clipboard


import 'package:layout_pro/responsive_layout.dart';


import 'package:layout_pro/responsive_widget.dart';


For more detailed examples, check the /example folder in the package repository.
Additional Information #

For more information about this package and how to use it, visit the package documentation on pub.dev.
To report issues, suggest features, or contribute to the package, please visit the GitHub repository.
We welcome contributions from the community. Feel free to create pull requests or open issues.

If you have any questions or need further assistance, please don't hesitate to reach out to the package authors or the Flutter community.
Usage #
Here's a simple example of how to use the Responsive and GridViewBuilder classes to create a responsive grid:
import 'package:flutter/material.dart';
import 'package:layout_pro/responsive_layout.dart';
import 'package:layout_pro/responsive_widget.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({super.key});
final imageList = [
'https://www.kasandbox.org/programming-images/avatars/spunky-sam.png',
'https://www.kasandbox.org/programming-images/avatars/spunky-sam-green.png',
'https://www.kasandbox.org/programming-images/avatars/purple-pi.png',
'https://www.kasandbox.org/programming-images/avatars/purple-pi-teal.png',
'https://www.kasandbox.org/programming-images/avatars/purple-pi-pink.png',
'https://www.kasandbox.org/programming-images/avatars/primosaur-ultimate.png',
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Responsive GridView Example'),
),
body: Column(
children: [
ResponsiveWidget(
mobile: Image.network(imageList[0],height: 100,width: 200,),
tablet: Image.network(imageList[0],height: 300,width: 400,),
desktop: Image.network(imageList[0],height: 800,width: 900,),
),
Expanded(
child: ResponsiveLayout(
mobileCrossAxisCount: 2,
mobileRatio: 1.5,
itemCount: imageList.length,
builder: (context, index) {
return Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
boxShadow: const [
BoxShadow(
color: Colors.orange,
offset: Offset(1, 1),
blurRadius: 10
),
BoxShadow(
color: Colors.pinkAccent,
offset: Offset(-1, -1),
blurRadius: 10
)
],
gradient: const LinearGradient(colors: [
Colors.pinkAccent,
Colors.orange,
Colors.red,
])
),
child: Image.network(imageList[index],fit: BoxFit.cover,),
);
},
),
),
],
),
),
);
}
}
copied to clipboard