device_responsive 0.0.2

A magical, ultra-short, and powerful Flutter package to make your app responsive across Mobile, Tablet, Desktop, and Web with zero boilerplate.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return AutoResponsiveInit(
      designSize: const Size(375, 812),
      builder: (context) => const MaterialApp(
        title: 'Auto Responsive UI Demo',
        home: UniversalDashboardScreen(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: context.device(
        m: AppBar(
          title: Text("My Dashboard", style: TextStyle(fontSize: 18.sp)),
        ),
        d: null,
        w: null,
      ),
      body: Row(
        children: [
          if (context.device(m: false, t: false, d: true, w: true) ?? false)
            Container(
              width: 250,
              color: Colors.blueGrey.shade900,
              child: const Center(
                child: Text(
                  "Sidebar Menu",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          Expanded(
            child: Padding(
              padding: context.orientation(
                p: EdgeInsets.all(
                  16.r,
                ),
                l: EdgeInsets.all(30.r),
              ),
              child: AutoFlex(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Container(
                    width: context.orientation(p: double.infinity, l: 100.w),
                    height: context.orientation(p: 200.h, l: double.infinity),
                    decoration: BoxDecoration(
                      color: Colors.indigo,
                      borderRadius: BorderRadius.circular(15.r),
                    ),
                    child: Center(
                      child: Text(
                        "Welcome to Auto Responsive UI!",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: context.device(
                            m: 18.sp,
                            t: 22.sp,
                            d: 28.sp,
                          ),
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 20.h, width: 20.w),
                  Expanded(
                    child: GridView.count(
                      crossAxisCount:
                          context.device(
                            m: context.orientation(p: 1, l: 1),
                            t: 3,
                            d: 4,
                            w: 4,
                          ) ??
                          2,
                      mainAxisSpacing: 15.h,
                      crossAxisSpacing: 15.w,
                      children: List.generate(8, (index) {
                        return Container(
                          decoration: BoxDecoration(
                            color: Colors.grey.shade200,
                            borderRadius: BorderRadius.circular(10.r),
                          ),
                          child: Center(
                            child: Text(
                              "Card ${index + 1}",
                              style: TextStyle(fontSize: 14.sp),
                            ),
                          ),
                        );
                      }),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}