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:

1. Add the following dependency to your pubspec.yaml file:

   dependencies:
     layout_pro:  # Use the latest version
   

2. import 'package:layout_pro/responsive_layout.dart';

3. 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,),
                     );
                   },
                 ),
               ),
             ],
           ),
         ),
       );
     }
   }

Libraries

grid_view

responsive_layout

responsive_widget