fl_sdp 0.0.3

A Flutter package to easily scale dimensions and fonts based on screen size, providing a responsive UI design.

fl_sdp

fl_sdp is a Flutter package for managing scalable dimensions (SDP), fonts, and utilities like padding and margin. It ensures consistent UI appearance across devices with varying screen sizes and resolutions.

Features

• Responsive Dimensions: Scale dimensions (sdp) proportionally to the screen size.
• Font Scaling: Adjust text sizes dynamically using (fontSdp).
• Advanced Padding and Margin Utilities:
  • Simplified all, horizontal, and vertical configuration.
  • Fine-grained control with left, top, right, and bottom.
• Global Initialization: Initialize once and use throughout the app.

Installation

Add the package to your pubspec.yaml file:

dependencies:
  fl_sdp: ^0.0.2

Install the package:

flutter pub get

fl_sdp

fl_sdp is a Flutter package for managing scalable dimensions (SDP), fonts, and utilities like padding and margin. It ensures consistent UI appearance across devices with varying screen sizes and resolutions.

Features

• Responsive Dimensions: Scale dimensions (sdp) proportionally to the screen size.
• Font Scaling: Adjust text sizes dynamically using (fontSdp).
• Advanced Padding and Margin Utilities:
  • Simplified all, horizontal, and vertical configuration.
  • Fine-grained control with left, top, right, and bottom.
• Global Initialization: Initialize once and use throughout the app.

Installation

Add the package to your pubspec.yaml file:

dependencies:
  fl_sdp: ^0.0.2

Install the package:

flutter pub get

Usage

1. Initialize SDP

Initialize fl_sdp once in your main.dart file:

import 'package:flutter/material.dart';
import 'package:fl_sdp/sdp.dart'; // Import the package

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  AppTheme.setStatusBarColor(isLightTheme: true);

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static final GlobalKey<NavigatorState> navigatorKey =
      GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    if (!SDP.isInitialized) {
      SDP.init(context); // This will initialize SDP once / Sometime screens need to
    }

    return LayoutBuilder(
      builder: (context, constraints) {
        SDP.init(context); //And this too
      navigatorKey: navigatorKey, 
      home: HomeScreen(),
    );
    .....
    .....
    .....
    .....
  
  }
}

2. Use SDP in Widgets

After initialization, you can use the following features across your app:

2.1 Scalable Dimensions

Scale any dimension using SDP.sdp():

Container(
  width: SDP.sdp(150),
  height: SDP.sdp(100),
  color: Colors.blue,
);

2.2 Scalable Fonts

Adjust font sizes dynamically with SDP.fontSdp():

Text(
  "Responsive Font",
  style: TextStyle(fontSize: SDP.fontSdp(16)),
);

2.3 Padding and Margins

Simplify padding and margin configuration with utilities:

Container(
  padding: SDP.padding(all: 16), // Uniform padding
  margin: SDP.margin(horizontal: 16, vertical: 8), // Symmetric margin
  color: Colors.green,
);

For more control:

SDP.padding(left: 16, top: 8, right: 16, bottom: 8);

Example

Here's a complete example of how to use fl_sdp in your app:

import 'package:flutter/material.dart';
import 'package:fl_sdp/sdp.dart';

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

class MyApp extends StatelessWidget {
  static final GlobalKey<NavigatorState> navigatorKey =
      GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      SDP.init(navigatorKey.currentContext!);
    });

    return MaterialApp(
      navigatorKey: navigatorKey,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SDP Example")),
      body: Center(
        child: Container(
          padding: SDP.padding(all: 16),
          margin: SDP.margin(horizontal: 16, vertical: 8),
          width: SDP.sdp(150),
          height: SDP.sdp(100),
          color: Colors.blue,
          child: Text(
            "Responsive UI",
            style: TextStyle(fontSize: SDP.fontSdp(16), color: Colors.white),
          ),
        ),
      ),
    );
  }
}

API Reference

1. Scalable Dimensions

2. SDP.sdp(double dp): Scales the provided dimension proportionally to the screen width.(Use for basic ui and font both)

3. Scalable Fonts

4. SDP.fontSdp(double fontSize): Scales text size based on screen width.

5. Padding Utilities

6. SDP.padding({double all, double horizontal, double vertical, double left, double top, double right, double bottom}): Simplifies the creation of responsive padding.

7. Margin Utilities

8. SDP.margin({double all, double horizontal, double vertical, double left, double top, double right, double bottom}): Simplifies the creation of responsive margins.

Why Use fl_sdp?

• Consistency: Maintain a uniform UI across devices of varying screen sizes and resolutions.
• Ease of Use: Initialize once globally and use throughout your app.
• Flexibility: Customize scaling with predefined methods and utilities.
• Time-Saving: Reduces boilerplate code for managing responsive layouts.

Contributions

Contributions are welcome! If you have ideas for improvements or additional features, feel free to open a pull request or file an issue.

License

fl_sdp is licensed under the MIT License. See the LICENSE file for details.