dynamic_responsive_screen 1.0.0

An automatic responsive scaling library for Flutter. It offers different scaling strategies for containers and text elements.

example/lib/main.dart

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Responsive Kit Demo',
          style: TextStyle(fontSize: context.sp(20)),
        ),
      ),
      body: Center(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(context.r(16)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Responsive Container
              Container(
                width: context.w(200),
                height: context.h(150),
                color: Colors.blue,
                child: Center(
                  child: Text(
                    '${context.w(200).toInt()}x${context.h(150).toInt()}',
                    style: const TextStyle(color: Colors.white),
                  ),
                ),
              ),

              SizedBox(height: context.h(20)),

              // Responsive Text
              Text(
                'Bu text responsive',
                style: TextStyle(
                  fontSize: context.sp(24),
                  fontWeight: FontWeight.bold,
                ),
              ),

              SizedBox(height: context.h(10)),

              Text(
                'Cihaz: ${context.isMobile
                    ? "Mobil"
                    : context.isTablet
                    ? "Tablet"
                    : "Desktop"}',
                style: TextStyle(fontSize: context.sp(16)),
              ),

              Text(
                'Ekran: ${context.screenWidth.toInt()} x ${context.screenHeight.toInt()}',
                style: TextStyle(fontSize: context.sp(14), color: Colors.grey),
              ),

              SizedBox(height: context.h(20)),

              // Responsive Card
              Container(
                width: context.w(300),
                padding: EdgeInsets.all(context.r(20)),
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(context.r(16)),
                ),
                child: Column(
                  children: [
                    Text(
                      'Responsive Card',
                      style: TextStyle(
                        fontSize: context.sp(18),
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: context.h(10)),
                    Text(
                      'Bu kart tüm cihazlarda güzel görünür',
                      style: TextStyle(fontSize: context.sp(14)),
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}