Add Automatic Responsiveness.

[1abir]

Flutter is awesome as it is true cross platform for android, ios and web.

Wouldn't it be more awesome if programmers don't have to bother about responsiveness across different size of screens?

I think flutter dev team is smart enough to implement AI, ML, DL techniques to add automatic responsiveness on flutter apps.

Flutter has awesome responsive apps and thousands of responsive open source projects. It's time to look at automatic responsiveness and build model of responsiveness coding which would help the AI, ML, DL algorithms to be trained fast and we get the automatic responsiveness feature as soon as possible.

[iapicca]

Hi @1abir

with automatic do you mean code_gen?

An app can respond very differently to different screen sizes, are you suggesting a "default" reaction?

Could you please detail how ML should be involved in the process?

Thank you

[1abir]

Hi @iapicca Thanks for your response.

With automatic I meant "not explicit coding". It may be foreground code_gen or background code_gen. More precisely, I meant an algorithm that can differentiate between main view and side bar, that can calculate which font size is appropriate for a paragraph or subparagraph for a given screen size.

In a nutshell -

• I want to code for only mobile app and want a good looking responsive page in web.
• I want to code for only web and want a good looking responsive page in ios or android.

Let's come to the Machine Learning process. We can design an algorithm that learns from existing responsive apps to recognize which portion of a desktop webpage goes to the bottom in mobile app, which portions would remain pinned in mobile app, how the font size changes with respect to sizes or rotation, how spaces between widgets changes across screen sizes or screen rotation. So when it gets a code for web - it converts it for mobile screen.

Hope it is clear. For any further query please let me know.

Thanks again.

[evandrmb]

I believe it would make more sense to have some specific widget to do it, instead of automatically handling it.

It's common for Flutter projects that target more than one platform to have pieces of code like the below, which I extracted from Very Good Ventures Slide Puzzle

import 'package:flutter/widgets.dart';
import 'package:very_good_slide_puzzle/layout/layout.dart';

/// Represents the layout size passed to [ResponsiveLayoutBuilder.child].
enum ResponsiveLayoutSize {
  /// Small layout
  small,

  /// Medium layout
  medium,

  /// Large layout
  large
}

/// Signature for the individual builders (`small`, `medium`, `large`).
typedef ResponsiveLayoutWidgetBuilder = Widget Function(BuildContext, Widget?);

/// {@template responsive_layout_builder}
/// A wrapper around [LayoutBuilder] which exposes builders for
/// various responsive breakpoints.
/// {@endtemplate}
class ResponsiveLayoutBuilder extends StatelessWidget {
  /// {@macro responsive_layout_builder}
  const ResponsiveLayoutBuilder({
    Key? key,
    required this.small,
    required this.medium,
    required this.large,
    this.child,
  }) : super(key: key);

  /// [ResponsiveLayoutWidgetBuilder] for small layout.
  final ResponsiveLayoutWidgetBuilder small;

  /// [ResponsiveLayoutWidgetBuilder] for medium layout.
  final ResponsiveLayoutWidgetBuilder medium;

  /// [ResponsiveLayoutWidgetBuilder] for large layout.
  final ResponsiveLayoutWidgetBuilder large;

  /// Optional child widget builder based on the current layout size
  /// which will be passed to the `small`, `medium` and `large` builders
  /// as a way to share/optimize shared layout.
  final Widget Function(ResponsiveLayoutSize currentSize)? child;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final screenWidth = MediaQuery.of(context).size.width;

        if (screenWidth <= PuzzleBreakpoints.small) {
          return small(context, child?.call(ResponsiveLayoutSize.small));
        }
        if (screenWidth <= PuzzleBreakpoints.medium) {
          return medium(context, child?.call(ResponsiveLayoutSize.medium));
        }
        if (screenWidth <= PuzzleBreakpoints.large) {
          return large(context, child?.call(ResponsiveLayoutSize.large));
        }

        return large(context, child?.call(ResponsiveLayoutSize.large));
      },
    );
  }
}

I believe that Flutter could have default breakpoints like bootstrap that developers could manually change in a Theme property or directly into a ResponsiveLayoutBuilder. Of course, we could just abstract it to lib or define in each project, but seems more reasonable to have it inside the framework itself.

[goderbauer]

cc @gspencergoog @a-wallen

[a-wallen]

You might want to take a look at the following pull requests regarding "[adaptive_scaffold]". It is possible that once https://github.com/flutter/packages/pull/2455 lands it will solve your pain point.