Issue with responsive sizing

[jsfsarkis]

I am trying to use responsive sizing for text font size as described in the docs

fontSize: 14.sh

But this throws the following error

LateInitializationError: Field 'height' has not been initialized.

Any help would be appreciated!

[tmatrai]

I have a similar problem and I fixed it, pls see my sample code below.

/// # Fixing LateInitializationError with responsive_builder in Flutter
/// 
/// When using `responsive_builder` package, the `sh` (screen height) and `sw` (screen width) 
/// extensions require proper initialization. If you use them without wrapping your app 
/// inside a `ResponsiveApp`, you might encounter the following error:
/// 
/// ```dart
/// LateInitializationError: Field 'height' has not been initialized.
/// ```
/// 
/// The correct way to initialize the app to prevent this error is by using `ResponsiveApp`.
/// Below is an example implementation:

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

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

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

  @override
  Widget build(BuildContext context) {
    return ResponsiveApp(
      builder: (context) => MaterialApp(
        builder: (context, child) {
          return MediaQuery(
            data: MediaQuery.of(context),
            child: child!,
          );
        },
        debugShowCheckedModeBanner: false,
        title: 'Responsive App Example',
        home: const LoginPage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Welcome to the Responsive App!'),
          SizedBox(height: 20.sh), // Using .sh to set responsive spacing
          ElevatedButton(
            onPressed: () {},
            child: Text('Click Me'),
          ),
        ],
      ),
    );
  }
}

/// ## Explanation:
/// 1. `ResponsiveApp` ensures that `sh` and `sw` are initialized before they are used.
/// 2. The `MaterialApp` builder includes `MediaQuery`, ensuring that the screen dimensions are properly passed down.
/// 3. The `LoginPage` widget uses `.sh` to create responsive spacing.
/// 4. This setup prevents `LateInitializationError` and ensures that responsive utilities work as expected.
/// 
/// If you're using `sh` and `sw` inside widgets, make sure that the widget tree is wrapped inside a `ScreenTypeLayout`.