size_config_fl 0.0.2

Size_config_fl package is used for ui responsive.

use

To use the plugin, add size_config_fl as a dependency in pubsepec.yaml file

Features

Features of the "size_config_fl" Flutter Package:

Responsive UI Elements: The "size_config_fl" package provides developers with a set of utility functions that allow for the creation of responsive UI elements. With these functions, you can define widget sizes and positions in relative dimensions, enabling your UI to adapt seamlessly to different screen sizes and resolutions.

Image Size Control: This package offers convenient methods to control the size of images within your Flutter app. You can easily specify image dimensions based on the screen size, ensuring that images scale appropriately on various devices without distortion or loss of quality.

Font Size Control: Achieving consistent and readable text across different screen sizes is effortless with the "size_config_fl" package. It allows you to set font sizes proportionally to the screen's dimensions, ensuring optimal readability and a visually harmonious UI.

Device-Independent Design: By utilizing "size_config_fl," your app's UI becomes device-independent. You won't need to hardcode specific dimensions for each device; instead, the package handles the adjustments, making your app look polished and professional across a wide range of devices.

Orientation Support: The "size_config_fl" package seamlessly handles changes in device orientation, automatically resizing UI elements to suit portrait and landscape modes. This ensures that your app maintains an optimal layout regardless of how users hold their devices.

AspectRatio Control: With "size_config_fl," you can easily manage the aspect ratio of widgets and images. This feature is particularly useful when working with media elements that require precise aspect ratios for proper display.

Simplified Layout Code: The package helps you reduce boilerplate code and simplifies the UI design process. You can focus on creating widgets without worrying about individual device dimensions and responsiveness complexities.

Customizable Breakpoints: "size_config_fl" allows you to define custom breakpoints to adjust the layout and design of your UI at specific screen sizes. This feature gives you greater control over the appearance of your app on various devices.

With these powerful features, the "size_config_fl" Flutter package empowers developers to build UIs that are not only visually appealing but also seamlessly responsive across different devices, resulting in an outstanding user experience for your app's users.

Usage

import 'package:flutter/material.dart';
import 'package:hisense_hr_portal/util/size_config.dart';


void main() async {
  
  runApp(
     MultiProvider(providers: providers, child: const MyApp()),
  );
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
    
    // ---------------------------------- init--------------------------

    return LayoutBuilder(builder: (context, constraints) {
      return OrientationBuilder(
        builder: (context, orientation) {
          
          SizeConfig(
            designScreenWidth: 375,
            designScreenHeight: 875,
          ).init(constraints, orientation);
          return MaterialApp(
              navigatorKey: NavigationService.navigatorKey,
              debugShowCheckedModeBanner: false,
              title: 'Size',
              theme: ThemeData(
                colorScheme: ColorScheme.fromSwatch(
                  accentColor: CustomColors.secondaryColor,
                  primarySwatch: SwatchC.black,
                ),
                primarySwatch: Colors.blue,
                splashColor: Colors.transparent,
                highlightColor: Colors.transparent,
              ),
              onGenerateRoute: onAppGenerateRoute(),
              // initialRoute: SplashScreen.route,

              builder: EasyLoading.init(
                builder: (context, child) {
                  SnackBarMessages().init(context);
                  return child!;
                },
              ),
              home: const SplashScreen(),
              );
        },
      );
    });
  }
}


class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);
  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
   
    super.initState();
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ThemeColors.primaryColor,
      body: Padding(
        // ---------------------- use like that----------------
        //-------height * h,,,,-------width * w, -----------,font size * f,---------- image size --------- * i

        padding: EdgeInsets.fromLTRB(w * 52, h * 338, w * 52, h * 348),
        child: Center(
          child: Image.asset(
            "assets/images/splash_logo.png",
            color: Colors.white,
          ),
        ),
      ),
      floatingActionButton: Text(
        "version : 1.1.3",
        style: tsS12w500FFFFF,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}