Intro

This framework works flawlessly for small screen devices, but when you turn your device into landscape mode the situation also becomes upside down.

The Problem

Although this is able to hand my approximately 450x850 mobile, but when I turn it in landscape mode then all the ui elements are too big and some are even overflowing cause of the less dpi in small screen but that's not the case in portrait mode.

You can also try this on the recreated flutter website, when you turn your phone with any resolution into landscape mode then everything becomes too big to handle event the bottomNavigationBar also doesnt respect the small screen.

It seems like it doesn't respect nor recognize small screens in landscape mode cause it thinks that the width is higher so that is true in landscape but it should also consider that the height is low in landscape mode cause the resolution becomes 850x450(in my small screen case)

Suggestion / Possible Solution

Give us the option to specify other properties for landscape mode or by default respect landscape mode cause even if the width is high in it but the height is very low in that mode, or it should understand landscape mode by itself by checking the aspect ratio which is my case is approx 2:1 in landscape mode.

Enough Talk, Show me your code

This is the code of my builder inside MaterialApp

builder: (context, widget) => ResponsiveWrapper.builder(
  BouncingScrollWrapper.builder(context, widget),
  minWidth: 450,
  defaultScale: true,
  breakpoints: [
    ResponsiveBreakpoint.resize(500, name: MOBILE),
    ResponsiveBreakpoint.autoScale(800, name: TABLET),
    ResponsiveBreakpoint.autoScale(1000, name: TABLET),
    ResponsiveBreakpoint.resize(1200, name: DESKTOP),
    ResponsiveBreakpoint.autoScale(2460, name: "4K"),
  ],
),

Hi,

Let me start by saying this is an awesome plugin which am now using for all of my future projects! Amazing work there!

Now going back to the issue, I am working on an app which has a lot of text fields. I have notices that then the keypad opens about the amount of screen resizing (by Scaffold) which happens with the plugin is way less than what it does without the plugin. This is causing issue for me as the TextFields which is at the bottom of the screen is being covered by the keypad and there is no way to see what are we typing.

Here is my responsive configuration:

MaterialApp( builder: (context, widget) => ResponsiveWrapper.builder( BouncingScrollWrapper.builder(context, widget), maxWidth: 2200, minWidth: 480, defaultScale: true, breakpoints: [ ResponsiveBreakpoint.resize(480, name: MOBILE), ResponsiveBreakpoint.resize(800, name: TABLET), ResponsiveBreakpoint.autoScale(1000, name: DESKTOP), ], ),

Here are the images for reference:

Please have a look and let me know how this can be fixed!

Regards, Rajdeep Barad

I'm unfortunately not able to reproduce this error, and the stack trace from our logs is short and unhelpful, but I'm seeing this error pop up in our app at an alarmingly high rate. I call the ResponsiveWrapper.builder inside of the onGenerateRoute callback in MaterialApp so I can't figure out when the BuildContext would be null. Have you seen this issue before or know a direction to look? Like I said it's running flawlessly in all of my testing and I cannot reproduce.

Non-fatal Exception: FlutterError
NoSuchMethodError: The method 'dependOnInheritedWidgetOfExactType' was called on null. Receiver: null Tried calling: dependOnInheritedWidgetOfExactType(). Error thrown Instance of 'ErrorDescription'.
Non-fatal Exception: FlutterError

0  ???                            0x0 of + 814 (media_query.dart:814)
1  ???                            0x0 getDevicePixelRatio + 151 (responsive_wrapper.dart:151)
2  ???                            0x0 setDimensions + 395 (responsive_wrapper.dart:395)
3  ???                            0x0 <fn> + 454 (responsive_wrapper.dart:454)
4  ???                            0x0 _invokeFrameCallback + 1117 (binding.dart:1117)
5  ???                            0x0 handleDrawFrame + 1063 (binding.dart:1063)
6  ???                            0x0 _handleDrawFrame + 971 (binding.dart:971)

When I updated to flutter 3 , and started to use material you in my app , I got that warning from the framework so please update it as fast as possible , It's very important to me /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/responsive_framework-0.1.7/lib/responsive_wrapper.dart:623:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.

I don't know this is bug or not

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
         builder: (context, widget) => ResponsiveWrapper.builder(
          BouncingScrollWrapper.builder(context, widget),
          maxWidth: 1200,
          minWidth: 450,
          defaultScale: true,
          breakpoints: [
            ResponsiveBreakpoint.resize(450, name: MOBILE),
            ResponsiveBreakpoint.autoScale(800, name: TABLET),
            ResponsiveBreakpoint.autoScale(1000, name: TABLET),
            ResponsiveBreakpoint.resize(1200, name: DESKTOP),
            ResponsiveBreakpoint.autoScale(2460, name: "4K"),
          ],
          background: Container(color: Color(0xFFF5F5F5))),
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

I present my layouts in quite a personalized way, with overlays and popups using navigation and other tricks to avoid limitations of flutter and this library, so i use MediaQuery and max/min sizes to present a layout that uses heavily the shortest side of the screen in either landscape or portrait since i handle those cases internally.

The landscape breakpoints that this library provides are not fit for my use, and i would add a useShortestSide property that the user could try if they are in my position.

If you enable this property you don't need landscapeBreakpoints since all the breakpoints will be calculated on the normal breakpoints based on the shortest side, which might be the height or the width based on the rotation or screen size in the case of web.

It's optional for those who are comfortable with just letting this library do their job.

If I use a modal bottom sheet like below,

await showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))
      ),
      backgroundColor: Colors.transparent,
      builder: (BuildContext context) {
        return ResponsiveWrapper.builder(
             Container(),
             breakpoints: [...]
       );
);

The content becomes centered instead of aligning top like it does normally. Also I use bottom sheets with inputs which I float above the on screen keyboard using isScrollControlled = true to enable it to take up more than 50% of the screen, but with the ResponsiveWrapper it covers the entire screen and centers the child. I think this is because ResponsiveWrapper.builder technically returns a Stack with alignment:center but is there a way to keep the native flutter experience here of top aligning and shrinkwrapping height in modalBottomSheet?

Here are some photo examples: Without responsive builder the bottom sheet wraps content

Without responsive and with the keyboard open it hovers just over the keyboard (because isScrollControlled = true) and wraps content

With responsive builder it expands to cover the entire screen

hi @searchy2

with the new version that supports landscape responsiveness, im getting an error thats being thrown by flutter itself.

i know its the plugin causing the error because when i comment out the code for responsive framework, the error goes away

the error is:

The following StateError was thrown during a scheduler callback:
Bad state: No element

When the exception was thrown, this was the stack:
#0      ListIterable.firstWhere (dart:_internal/iterable.dart:107:5)
#1      _ResponsiveWrapperState.getActiveBreakpointSegment
(package:responsive_framework/responsive_wrapper.dart:537:10)
#2      _ResponsiveWrapperState.getScreenWidth
(package:responsive_framework/responsive_wrapper.dart:233:31)
#3      _ResponsiveWrapperState.setDimensions
(package:responsive_framework/responsive_wrapper.dart:499:19)
#4      _ResponsiveWrapperState.initState.<anonymous closure>
(package:responsive_framework/responsive_wrapper.dart:581:7)
#5      SchedulerBinding._invokeFrameCallback
(package:flutter/src/scheduler/binding.dart:1144:15)
#6      SchedulerBinding.handleDrawFrame
(package:flutter/src/scheduler/binding.dart:1090:9)
#7      SchedulerBinding.scheduleWarmUpFrame.<anonymous closure>
(package:flutter/src/scheduler/binding.dart:865:7)
(elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and
dart:async-patch)

please check

======== Exception caught by widgets library =======================================================
The following _TypeError was thrown building ResponsiveWrapper(dirty, state: _ResponsiveWrapperState#c9032):
type 'Color' is not a subtype of type 'Widget'

The relevant error-causing widget was: 
  ResponsiveWrapper file:///Users/huteri/flutter/.pub-cache/hosted/pub.dartlang.org/responsive_framework-0.0.14/lib/responsive_wrapper.dart:119:12
When the exception was thrown, this was the stack: 
#0      _ResponsiveWrapperState.build (package:responsive_framework/responsive_wrapper.dart:484:5)
#1      StatefulElement.build (package:flutter/src/widgets/framework.dart:4744:28)
#2      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4627:15)
#3      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4800:11)
#4      Element.rebuild (package:flutter/src/widgets/framework.dart:4343:5)
...
====================================================================================================

 /// First frame initialization default background color.
  /// Because layout initialization is delayed by 1 frame,
  /// a solid background color is displayed instead.
  /// Default white.
  final Color backgroundColor;

Used here as widget instead of color

return (screenWidth ==
            0) // Initialization check. Window measurements not available until postFrameCallback.
        ? (widget.backgroundColor ??
            Container(
                color: Color(
                    0xFFFFFFFF))) // First frame empty background color or default white.
        : InheritedResponsiveWrapper(

MediaQuery view insets return the values from the unscaled screen resolution so when you scale the screen size, the size of the media query becomes disproportionate. As scaledSize increases MediaQuery view insets move elements a smaller and smaller amount.

I'm using a very narrow testing scope so this may have some severe unintended consequences, but in ResponsiveWrapper, is there a reason the Stack that wraps the resized widget aligns top center and not center? If you use the showDialog method with a SimpleDialog child, it floats to the top when used with a ResponsiveWrapper instead of the native center float. Changing the stack alignment fixes the issue and I don't see any other consequences but again I have a pretty narrow scope.

Here's the code in question in responsive_wrapper.dart starting on line 457

  @override
  Widget build(BuildContext context) {
    return (screenWidth ==
            0) // Initialization check. Window measurements not available until postFrameCallback.
        ? (widget.backgroundColor ??
            Container(
                color: Color(
                    0xFFFFFFFF))) // First frame empty background color or default white.
        : InheritedResponsiveWrapper(
            data: ResponsiveWrapperData.fromResponsiveWrapper(this),
            child: Stack(
             ***alignment: Alignment.topCenter,***
              children: [
                widget.background ?? SizedBox.shrink(),
                MediaQuery(
                  data: calculateMediaQueryData(),
                  child: SizedBox(
                    width: screenWidth,
                    child: FittedBox(
                      fit: BoxFit.fitWidth,
                      alignment: Alignment.topCenter,
                      child: Container(
                        width: scaledWidth,
                        height: (widget.shrinkWrap == true &&
                                widget.mediaQueryData == null)
                            ? null
                            : scaledHeight,
                        // Shrink wrap height if no MediaQueryData is passed.
                        alignment: Alignment.center,
                        child: widget.child,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
  }

Changing to Alignment.center works like expected. Let me know if you have any feedback on this!

Hi,

I got headache last 2 days for working responsive_framework. I download all the example that shows in pub.dev and couldn't make it to work correctly.

In flutter.dev examples the drawer is not working on web. iOS version didn't run. I still believe is better than others but I am having difficulty to grasp the drawer section.

Web version I need to show open drawer (or similar) menu but on mobile and tablet I need to show menu icon so user can press and open the side menu. How to I do that? Where I can get working examples for this?

Kind Regards

Hello,

I'm giving this framework a try, so far I think it's amazing, however, I'm missing the Theme property on the ResponsiveWrapper object. Currently using the ResponsiveWrapper.builder constructor, but can't find any parameter for the ThemeData.

I've noticed in my app with ResponsiveFramework that whenever I click on Flutter Inspector > Toggle select widget mode it will route me back to the first screen. There is no error of any kind. When I remove ResponsiveFramework everything works.

I can say that problem might be in wrappers in MaterialApp build because my other wrapper behaves

I also have a few wrappers in MaterialApp builder method and noticed they work in a weird way with RespnsiveFramework. I guess inspector also works as a wrapper.

To recreate:

1. Run the example project in Chrome
2. Click on some button to push any page
3. Click on Flutter Inspector > Toggle select widget mode

Expected: Toggle select widget mode is active

Actual: The screen is reset to first screen.

I used this code:

return ResponsiveWrapper.builder(
  ClampingScrollWrapper.builder(context, Mechanism(child!)),
  landscapePlatforms: [ResponsiveTargetPlatform.android, ResponsiveTargetPlatform.iOS],
  minWidth: 340,
  defaultScaleFactor: 1.0,
  defaultScale: true,
  breakpoints: const [
     ResponsiveBreakpoint.resize(340, scaleFactor: 1),
     ResponsiveBreakpoint.autoScale(390, scaleFactor: 1.14),
     ResponsiveBreakpoint.autoScale(550, scaleFactor: 1.2), //[Working] <- Nexus 10 [Portrait] 1.40 * 90
     ResponsiveBreakpoint.autoScale(610, scaleFactor: 1.6), //[Working] <- Rollable [Portrait] 2.01 * 80%
     ResponsiveBreakpoint.autoScale(840, scaleFactor: 1.2), //[FAILED] <- Fold-out [Portrait]
  ],
);

It works on Android tablet emulator

But strangely, this doesn't work on Fold-out as seen on the attached image below! I also had changed the scaleFactor value into 0.8, 1.4 and 2.4; but all attempts don't change the size at all. It is always the same.

When a resize breakpoint is reached, the size of the widgets snaps back to the default size. This means if the breakpoint were at 800, the widget would be smaller at 800 than at 799. This doesn't seem desirable. How do we keep the widget the same non-default (larger) size at a resize breakpoint as just before it hits the breakpoint?