Skip to content

Breakpoint value is null on initial build #155

@jlin5

Description

@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),
      ),
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions