Flutter web ignore resize-CodePudding

I would like to make my web app does not resize/responsive when the screen become smaller. For example when i decrease my browser size, instead of its adapting to the width and height, i want the web app to ignore it and user can just scroll up, down, left and right to view the web.

CodePudding user response：

Use a SizedBox with a fixed height/width property

CodePudding user response：

I suggest you to use a LayoutBuilder and eventually add a SingleChildScrollView when the size becomes lower than your app expects.

This MinSize widget accomplishes it.

/// Starts scrolling [child] vertically and horizontally when the widget sizes
/// reaches below [minWidth] or [minHeight]
class MinSize extends StatelessWidget {
  const MinSize({
    Key? key,
    this.minWidth,
    this.minHeight,
    required this.child,
  }) : super(key: key);

  final Widget child;

  final double? minWidth;

  final double? minHeight;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final shouldScrollVertical =
            minHeight != null && constraints.maxHeight <= minHeight!;
        final contentHeight =
            shouldScrollVertical ? minHeight : constraints.maxHeight;

        final shouldScrollHorizontal =
            minWidth != null && constraints.maxWidth <= minWidth!;
        final contentWidth =
            shouldScrollHorizontal ? minWidth : constraints.maxWidth;
        return Scrollbar(
          isAlwaysShown: shouldScrollVertical,
          child: SingleChildScrollView(
            physics: shouldScrollVertical
                ? const AlwaysScrollableScrollPhysics()
                : const NeverScrollableScrollPhysics(),
            child: Scrollbar(
              isAlwaysShown: shouldScrollHorizontal,
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                physics: shouldScrollHorizontal
                    ? const AlwaysScrollableScrollPhysics()
                    : const NeverScrollableScrollPhysics(),
                child: UnconstrainedBox(
                  child: SizedBox(
                    height: contentHeight,
                    width: contentWidth,
                    child: child,
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

Alternatively, try the InteractiveViewer to freely move the content in the app window.