Breakpoint value is null on initial build

[jlin5]

I noticed that the breakpoint value will be null on initial build and a subsequent build update would have the breakpoint value. This would cause a sudden change on the screen which is most noticeable when using the SingleChildScrollView widget. I used an iPad (10th generation) simulator and ran Flutter's hot restart multiple times to see the screen changing size. This is happening on v1.0.0 to v1.1.1.

Print logs:

flutter: MediaQuery width: 1180.0
flutter: breakpoint: Breakpoint(start: 0.0, end: 0.0, name: null)
flutter: isDesktop: false
flutter: isTablet: false
flutter: isMobile: false
flutter: isPhone: false
flutter: -=-=-=-=-=-=-=-=
flutter: MediaQuery width: 700.0
flutter: breakpoint: Breakpoint(start: 801.0, end: 1920.0, name: DESKTOP)
flutter: isDesktop: true
flutter: isTablet: false
flutter: isMobile: false
flutter: isPhone: false
flutter: -=-=-=-=-=-=-=-=

Code:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      builder: (context, child) => ResponsiveBreakpoints.builder(
        child: child!,
        breakpoints: [
          const Breakpoint(start: 0, end: 450, name: MOBILE),
          const Breakpoint(start: 451, end: 800, name: TABLET),
          const Breakpoint(start: 801, end: 1920, name: DESKTOP),
          const Breakpoint(start: 1921, end: double.infinity, name: '4K'),
        ],
      ),
      onGenerateRoute: (RouteSettings settings) {
        return MaterialPageRoute(
          builder: (context) {
            return MaxWidthBox(
              maxWidth: 1200,
              background: Container(color: const Color(0xFFF5F5F5)),
              child: ResponsiveScaledBox(
                width: ResponsiveValue<double>(
                  context,
                  conditionalValues: [
                    Condition.equals(name: MOBILE, value: 450),
                    Condition.between(start: 800, end: 1100, value: 800),
                    Condition.between(start: 1000, end: 1200, value: 700),
                  ],
                ).value,
                child: BouncingScrollWrapper.builder(
                  context,
                  const MyHomePage(title: 'Flutter Demo Home Page'),
                  dragWithMouse: true,
                ),
              ),
            );
          },
        );
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    print('MediaQuery width: ${MediaQuery.of(context).size.width}');
    print('breakpoint: ${ResponsiveBreakpoints.of(context).breakpoint}');
    print('isDesktop: ${ResponsiveBreakpoints.of(context).isDesktop}');
    print('isTablet: ${ResponsiveBreakpoints.of(context).isTablet}');
    print('isMobile: ${ResponsiveBreakpoints.of(context).isMobile}');
    print('isPhone: ${ResponsiveBreakpoints.of(context).isPhone}');
    print('-=-=-=-=-=-=-=-=');

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

[rayliverified]

Thank you for reporting with the info. This could be the null size on initial frame issue. MediaQuery return null on the initial frame which makes layouts that rely on it not work on the first frame.

[pulsafi]

Hello, has this been resolved? @jlin5 were you able to figure something out? I'm having the same problem :/

[jesus-villalobos]

Same problem here :( Any fixes or temporary work around to address that initial null value? @jlin5 @rayliverified I really want to use this framework in my new app. Thank you 🙏🏽

[jlin5]

@pulsafi @jesus-villalobos @rayliverified

I'm not sure what happened but the screen doesn't change suddenly anymore when I run the sample code. The breakpoint value is still null though on initial build. I noticed that in version 0.2.0, there was a conditional that would return an empty background if the screenWidth is 0.

https://github.com/Codelessly/ResponsiveFramework/blob/08a673f3f93d296a4c2cfd7efe5f70d5dc858b7d/lib/responsive_wrapper.dart#L668-L680

The fix would be to add a similar conditional before InheritedResponsiveBreakpoints in the latest version.

    // Initialization check. Window measurements not available until postFrameCallback.
    // Return first frame with empty widget.
    if (screenWidth == 0) {
      return Container();
    }

https://github.com/Codelessly/ResponsiveFramework/blob/03bf2aebee21e18d5c0d0128f0851f475859787a/lib/responsive_breakpoints.dart#L264-L274

[jesus-villalobos]

Thank you for looking into this @jlin5 🙏🏽 From my understanding, though, there is nothing that I can do on my end to catch this Null? Should I just add a check for if screenSize is Null? Or would we just have to wait until @rayliverified gets around to addressing this? Thanks :)

[rayliverified]

You're right, the initial frame 0 width and height issue is still present in the Flutter framework.

Let me read through the issues and see how people want to solve this. So far, the v0.2.0 solution was an empty container with a configurable color.

Solution 1: Empty container Complaints: Black, flickering. Solution 2: Empty container with configurable color

We're currently at Solution 2. I'll add Solution 2 back after doing some investigation into if it's compatible with initial loading screens / indicators.