any_screen 0.2.0

A flutter package that simplifies the process of building responsive UIs

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:any_screen/any_screen.dart';

void main() {
  // if u want to change default config
  AnyScreenDefaultConfig.setConfig(
    xs: 320,
    sm: 480,
    md: 768,
    lg: 1024,
    xl: 1366,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          body: SafeArea(
            child: ListView(
              children: [
                Responsive(
                  builder: (context) => Container(
                    color: Colors.purpleAccent,
                    height: 50,
                    width: 30.pW,
                  ),
                ),

                /// responsive grid
                SizedBox(
                  height: 300,
                  child: ResponsiveGrid(
                    mainAxisSpacing: 10,
                    crossAxisSpacing: 10,
                    // itemHeight: ,
                    xs: 1,
                    md: 3,
                    lg: 4,
                    itemHeight: 30,
                    childrenBuilder: () => [
                      Container(
                        color: Colors.red,
                        height: 400,
                        width: 50,
                      ),
                      Container(
                        color: Colors.blue,
                        height: 100,
                        width: 100,
                      ),
                      Container(
                        color: Colors.green,
                        height: 100,
                        width: 100,
                      ),
                      Container(
                        color: Colors.amber,
                        height: 100,
                        width: 100,
                      ),
                    ],
                  ),
                ),

                /// responsive wrap
                ResponsiveWrap(
                  items: [
                    ResponsiveWrapChild(
                      xs: 12,
                      md: 6,
                      lg: 4,
                      child: Container(
                        color: Colors.red,
                        height: 100,
                        width: 100,
                      ),
                    ),
                    ResponsiveWrapChild(
                      xs: 12,
                      md: 6,
                      lg: 4,
                      child: Container(
                        color: Colors.blue,
                        height: 100,
                        width: 100,
                      ),
                    ),
                    ResponsiveWrapChild(
                      xs: 12,
                      lg: 4,
                      child: Container(
                        color: Colors.green,
                        height: 100,
                        width: 100,
                      ),
                    ),
                    ResponsiveWrapChild(
                      xs: 12,
                      child: Container(
                        color: Colors.amber,
                        height: 100,
                        width: 100,
                      ),
                    ),
                  ],
                  colCount: 12,
                ),

                /// show this wiget below the md screen size
                ResponsiveToggle(
                  builder: (context) {
                    return Container(
                      color: Colors.red,
                      height: 100,
                      width: 100,
                      child: const Text(
                          'show this wiget below the md screen size'),
                    );
                  },
                  showBefore: ScreenType.md,
                ),

                /// or use show method extension of widget only if the  widget is child of any_screen widgets
                Responsive(
                  builder: (context) {
                    return Container(
                      color: Colors.red,
                      height: 100,
                      width: 100,
                      child: const Text(
                          'show this wiget below the md screen size'),
                    ).show(showBefore: ScreenType.md);
                  },
                ),
              ],
            ),
          ),
        ));
  }
}