layout_pro 0.0.4

A Flutter package that simplifies creating responsive grid views. It offers a set of methods to generate grid views with flexible configurations for various screen sizes. Easily adapt your grid layout [...]

example/main.dart

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