mirai_responsive 0.0.6

A Flutter package for building responsive layouts and scalable sizing across mobile, tablet, and desktop devices.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mirai Responsive Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Mirai Responsive Demo',
          style: TextStyle(fontSize: MiraiSize.textSize20),
        ),
      ),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          MiraiSize().init(constraints: constraints);

          return MiraiResponsive(
            key: ValueKey<String>(
              'layout_${MiraiSize.responsiveEnum.toString()}',
            ),
            mobile: const MobileLayout(),
            landscapeMobileLayout: const MobileLandscapeLayout(),
            tablet: const TabletLayout(),
            landscapeTabletLayout: const TabletLandscapeLayout(),
            desktop: const DesktopLayout(),
          );
        },
      ),
    );
  }
}

// Reusable grid component
class ResponsiveGrid extends StatelessWidget {
  const ResponsiveGrid({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: MiraiSize.gridCount,
        crossAxisSpacing: MiraiSize.space16,
        mainAxisSpacing: MiraiSize.space16,
        childAspectRatio: 1.0,
      ),
      itemCount: 12,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          padding: EdgeInsets.all(MiraiSize.space8),
          decoration: BoxDecoration(
            color: Colors.blue.withValues(alpha: 0.2),
            borderRadius: BorderRadius.circular(MiraiSize.radius8),
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: Colors.black.withValues(alpha: 0.1),
                blurRadius: MiraiSize.radius4,
                offset: Offset(0, MiraiSize.space2),
              ),
            ],
          ),
          child: Center(
            child: FittedBox(
              fit: BoxFit.scaleDown,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Icon(
                    Icons.devices,
                    size: MiraiSize.iconSize28,
                    color: Colors.blue,
                  ),
                  SizedBox(height: MiraiSize.space4),
                  Text(
                    'Item ${index + 1}',
                    style: TextStyle(fontSize: MiraiSize.textSize14),
                  ),
                  Text(
                    'Grid count: ${MiraiSize.gridCount}',
                    style: TextStyle(
                      fontSize: MiraiSize.textSize10,
                      color: Colors.grey,
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

// Mobile Layout Component
class MobileLayout extends StatelessWidget {
  const MobileLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(MiraiSize.space16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Mobile Layout',
            style: TextStyle(
              fontSize: MiraiSize.textSize24,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: MiraiSize.space16),
          const ResponsiveGrid(),
        ],
      ),
    );
  }
}

// Mobile Landscape Layout Component
class MobileLandscapeLayout extends StatelessWidget {
  const MobileLandscapeLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(MiraiSize.space16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Landscape Mobile Layout',
            style: TextStyle(
              fontSize: MiraiSize.textSize24,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: MiraiSize.space16),
          const ResponsiveGrid(),
        ],
      ),
    );
  }
}

// Tablet Layout Component
class TabletLayout extends StatelessWidget {
  const TabletLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(MiraiSize.space20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Tablet Layout',
            style: TextStyle(
              fontSize: MiraiSize.textSize28,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: MiraiSize.space20),
          const ResponsiveGrid(),
        ],
      ),
    );
  }
}

// Tablet Landscape Layout Component
class TabletLandscapeLayout extends StatelessWidget {
  const TabletLandscapeLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(MiraiSize.space20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Landscape Tablet Layout',
            style: TextStyle(
              fontSize: MiraiSize.textSize28,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: MiraiSize.space20),
          const ResponsiveGrid(),
        ],
      ),
    );
  }
}

// Desktop Layout Component
class DesktopLayout extends StatelessWidget {
  const DesktopLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(MiraiSize.space24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Desktop Layout',
            style: TextStyle(
              fontSize: MiraiSize.textSize32,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: MiraiSize.space24),
          const ResponsiveGrid(),
        ],
      ),
    );
  }
}