responsive_builder

To change the launch screen image for your iOS application, you can either replace the image files directly in the LaunchImage.imageset directory or use Xcode for a more visual approach.

Method 1: Manual File Replacement

Replace the existing image files within the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets.

Method 2: Using Xcode

1. Open your Flutter project's iOS workspace using the command: open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog to replace the existing launch images.

To use responsive sizing extensions (like screenHeight or screenWidth), you must wrap your MaterialApp or CupertinoApp with the ResponsiveApp widget.

ResponsiveApp(
  builder: (context) => MaterialApp(
    ...
  )
)

Add responsive_builder as a dependency to your pubspec.yaml file to use the package in your Flutter project.

responsive_builder:

To use the responsive sizing extensions (like .sw and .sh) throughout your application, you must wrap your root widget with the ResponsiveApp widget. This widget initializes the global screen dimensions and orientation settings required by the utility class.

Use the preferDesktop parameter to specify whether the application should default to desktop layouts when a specific layout is not provided.

ResponsiveApp(
  preferDesktop: true, // Set to true if you want to prefer desktop layouts
  builder: (context) => MyApp(),
)

To set breakpoints globally for the entire application, call ResponsiveSizingConfig.instance.setCustomBreakpoints() before runApp(). This will affect all ResponsiveBuilder and ScreenTypeLayout widgets unless they are provided with their own local breakpoints argument.

void main() {
  ResponsiveSizingConfig.instance.setCustomBreakpoints(
    ScreenBreakpoints(desktop: 800, tablet: 550, watch: 200),
  );
  runApp(MyApp());
}

Instead of rebuilding entire layouts, use getValueForScreenType<T> to retrieve specific values (like padding, font size, or booleans) based on the current DeviceScreenType. This is useful for fine-tuning properties without conditional logic in your widget tree.

// Get a double value based on screen type
Container(
  padding: EdgeInsets.all(getValueForScreenType<double>(
                context: context,
                mobile: 10,
                tablet: 30,
                desktop: 60,
              )),
  child: Text('Best Responsive Package'),
)

// Use for conditional visibility
getValueForScreenType<bool>(
    context: context,
    mobile: false,
    tablet: true,
  ) ? MyWidget() : Container()

OrientationLayoutBuilder allows you to define separate UIs for portrait and landscape orientations without manual MediaQuery checks.

You can also use the mode property to enforce a specific orientation. The default mode is OrientationLayoutBuilderMode.auto.

// Return a widget function per orientation
OrientationLayoutBuilder(
  portrait: (context) => Container(color: Colors.green),
  landscape: (context) => Container(color: Colors.pink),
),

// Enforcing orientation mode
OrientationLayoutBuilder(
  /// default mode is 'auto'
  mode: info.isMobile
    ? OrientationLayoutBuilderMode.portrait
    : OrientationLayoutBuilderMode.auto,
  ...
),

Once ResponsiveApp is configured, you can use extensions on numbers to define sizes as a percentage of the screen width or height.

• screenHeight or sh for screen height percentage.
• screenWidth or sw for screen width percentage.

import 'package:responsive_builder/responsive_builder.dart';

SizedBox(height: 30.screenHeight); // Or 30.sh
Text('respond to width', style: TextStyle(fontSize: 10.sw));

Once ResponsiveApp is wrapping your application, you can use extensions on num types to calculate dimensions as a percentage of the current screen size. This allows for fluid layouts that scale based on the device dimensions.

Available extensions:

• screenHeight / sh: Returns (value / 100) * currentScreenHeight.
• screenWidth / sw: Returns (value / 100) * currentScreenWidth.

Example usage:

Container(
  width: 50.sw, // 50% of screen width
  height: 20.sh, // 20% of screen height
)

// Example of using the extensions
Container(
  width: 50.sw, 
  height: 20.sh,
)