flexi_scale 1.1.0

flexi_scale: ^1.1.0 copied to clipboard

example/lib/main.dart

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

void main() {
  runApp(const FlexiScaleApp(
    title: 'Flexi Scale Example',
    child: FlexiScaleHome(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flexi Scale Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: Colors.indigo,
        useMaterial3: true,
      ),
      home: ResponsiveSize.builder(
        child: Builder(
          builder: (context) {
            // ✅ Automatically detects device type & sets baseline
            ResponsiveSize.instance.init(context);
            return const FlexiScaleHome();
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final rs = ResponsiveSize.instance;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flexi Scale Example'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.rsWidth),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            _buildDeviceInfoCard(rs),
            24.rsVerticalGap,
            _buildResponsiveBox(),
            24.rsVerticalGap,
            _buildAdaptiveTextExample(),
            24.rsVerticalGap,
            _buildResponsiveButton(),
            24.rsVerticalGap,
            _buildRowExample(),
            24.rsVerticalGap,
            _buildSummaryFooter(rs.deviceType),
          ],
        ),
      ),
    );
  }

  Widget _buildDeviceInfoCard(ResponsiveSize rs) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(16.rsWidth),
      decoration: BoxDecoration(
        color: Colors.indigo.shade50,
        borderRadius: BorderRadius.circular(16.rsRadius),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          AdaptiveText(
            '📱 Device Information',
            style: TextStyle(
              fontSize: 20.rsFont,
              fontWeight: FontWeight.bold,
              color: Colors.indigo,
            ),
          ),
          SizedBox(height: 8.rsHeight),
          AdaptiveText('Device Type: ${rs.deviceType.name}'),
          AdaptiveText(
              'Orientation: ${rs.isLandscape ? 'Landscape' : 'Portrait'}'),
          AdaptiveText(
              'Resolution: ${rs.screenWidth.toStringAsFixed(0)} × ${rs.screenHeight.toStringAsFixed(0)}'),
        ],
      ),
    );
  }

  Widget _buildResponsiveBox() {
    return Container(
      width: 260.rsWidth,
      height: 120.rsHeight,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.teal,
        borderRadius: BorderRadius.circular(20.rsRadius),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.15),
            blurRadius: 6.rsRadius,
            offset: Offset(0, 3.rsHeight),
          ),
        ],
      ),
      child: AdaptiveText(
        'Responsive Box',
        style: TextStyle(color: Colors.white, fontSize: 18.rsFont),
      ),
    );
  }

  Widget _buildAdaptiveTextExample() {
    return Container(
      padding: EdgeInsets.all(14.rsWidth),
      decoration: BoxDecoration(
        color: Colors.deepPurple.shade50,
        borderRadius: BorderRadius.circular(12.rsRadius),
      ),
      child: Column(
        children: [
          AdaptiveText(
            'Adaptive Text Example',
            style: TextStyle(
                fontSize: 24.rsFont,
                fontWeight: FontWeight.bold,
                color: Colors.deepPurple),
          ),
          SizedBox(height: 8.rsHeight),
          AdaptiveText(
            'This text scales automatically based on your screen width and text scale factor.',
            style: TextStyle(fontSize: 16.rsFont),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  Widget _buildResponsiveButton() {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.indigo,
        minimumSize: Size(180.rsWidth, 55.rsHeight),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(14.rsRadius),
        ),
      ),
      onPressed: () {},
      child: AdaptiveText(
        'Tap Me',
        style: TextStyle(color: Colors.white, fontSize: 16.rsFont),
      ),
    );
  }

  Widget _buildRowExample() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        _smallBox(Colors.pink, 'A'),
        _smallBox(Colors.orange, 'B'),
        _smallBox(Colors.green, 'C'),
      ],
    );
  }

  Widget _smallBox(Color color, String label) {
    return Container(
      width: 70.rsWidth,
      height: 70.rsHeight,
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(12.rsRadius),
      ),
      alignment: Alignment.center,
      child: Text(
        label,
        style: TextStyle(
          color: Colors.white,
          fontSize: 20.rsFont,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  Widget _buildSummaryFooter(DeviceType device) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(12.rsWidth),
      decoration: BoxDecoration(
        color: Colors.grey.shade100,
        borderRadius: BorderRadius.circular(12.rsRadius),
      ),
      child: Column(
        children: [
          AdaptiveText(
            '✅ Fully Automatic Responsive Scaling',
            style: TextStyle(
              fontSize: 18.rsFont,
              fontWeight: FontWeight.w600,
              color: Colors.indigo,
            ),
          ),
          SizedBox(height: 6.rsHeight),
          AdaptiveText(
            'No setup needed — auto-adjusts for $device.',
            style: TextStyle(fontSize: 14.rsFont, color: Colors.black87),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}