Codelessly/ResponsiveFramework


Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple. Demo: https://gallery.imfast.io/flutterwebsites/minimal/

https://codelessly.com

License: 0BSD

Language: Dart

Keywords: android, bootstrap, bootstrap4, demo, flutter, flutter-plugin, flutter-ui, framework, ios, responsive, responsive-layout, webapp, website, website-builder, website-development, website-template


Screenshots

Responsive Framework

Flutter Responsive Pub release GitHub Release Date GitHub issues GitHub top language GitHub code size in bytes Libraries.io for GitHub License

Screenshots

Responsiveness made simple

Responsive Framework adapts your UI to different screen sizes automatically. Create your UI once and have it display pixel perfect on mobile, tablet, and desktop!

The Problem

Supporting multiple display sizes often means recreating the same layout multiple times. Under the traditional Bootstrap approach, building responsive UI is time consuming, frustrating and repetitive. Furthermore, getting everything pixel perfect is near impossible and simple edits take hours.

Screenshots

The Solution

Use Responsive Framework to automatically scale your UI.

ResponsiveBreakpoint(breakpoint: 600, autoScale: true);

Demo

Minimal Website

A demo website built with the Responsive Framework. View Code

Quick Start

Pub release

Import this library into your project:

responsive_framework: ^latest_version

Add ResponsiveWrapper.builder to your MaterialApp or CupertinoApp.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, widget) => ResponsiveWrapper.builder(
          maxWidth: 1200,
          minWidth: 450,
          defaultScale: true,
          breakpoints: [
            ResponsiveBreakpoint(breakpoint: 450, name: MOBILE),
            ResponsiveBreakpoint(breakpoint: 800, name: TABLET, scale: true),
            ResponsiveBreakpoint(breakpoint: 1000, name: TABLET, scale: true),
            ResponsiveBreakpoint(breakpoint: 1200, name: DESKTOP),
            ResponsiveBreakpoint(breakpoint: 2460, name: "4K", scale: true),
          ],
          background: Container(color: Color(0xFFF5F5F5))),
      initialRoute: "/",
    );
  }
}

That's it!

AutoScale

Screenshots

AutoScale shrinks and expands your layout proportionally, preserving the exact look of your UI. This eliminates the need to manually adapt layouts to mobile, tablet, and desktop.

ResponsiveBreakpoint(breakpoint: 600, autoScale: true);

Flutter's default behavior is resize which Responsive Framework respects. AutoScale is off by default and can be enabled at breakpoints by setting autoScale to true.

Breakpoints

Screenshots

Breakpoints control responsive behavior at different screen sizes.

ResponsiveWrapper(
    child,
    breakpoints: [
        ResponsiveBreakpoint(breakpoint: 600, name: MOBILE, autoScale: false),
        ResponsiveBreakpoint(breakpoint: 800, name: TABLET, autoScale: true),
        ResponsiveBreakpoint(breakpoint: 1200, name: DESKTOP, autoScale: false),
    ],
)

Breakpoints give you fine-grained control over how your UI displays.

Introductory Concepts

These concepts helps you start using the Responsive Framework and build an responsive app quickly.

Scale vs Resize

Flutter's default behavior is to resize your layout when the screen dimensions change. Resizing a layout stretches it in the direction of an unconstrained width or height. Any constrained dimension stays fixed which is why mobile app UIs look tiny on desktop. The following example illustrates the difference between resizing and scaling.

Screenshots

An AppBar widget looks correct on a phone. When viewed on a desktop however, the AppBar is too short and the title looks too small. Here is what happens under each behavior:

  1. Resizing (default) - the AppBar's width is double.infinity so it stretches to fill the available width. The Toolbar height is fixed and stays 56dp.
  2. Scaling - the AppBar's width stretches to fill the available width. The height scales proportionally using an aspect ratio automatically calculated from the nearest ResponsiveBreakpoint. As the width increases, the height increases proportionally.

When scaled, the AppBar looks correct on desktop, up to a certain size. Once the screen becomes too wide, the AppBar starts to appear too large. This is where breakpoints come in.

Breakpoint Configuration

To adapt to a wide variety of screen sizes, set breakpoints to control responsive behavior.

ResponsiveWrapper(
    child,
    maxWidth: 1200,
    minWidth: 450,
    defaultScale: true,
    breakpoints: [
        ResponsiveBreakpoint(breakpoint: 450, name: MOBILE),
        ResponsiveBreakpoint(breakpoint: 800, name: TABLET, scale: true),
        ResponsiveBreakpoint(breakpoint: 1000, name: TABLET, scale: true),
        ResponsiveBreakpoint(breakpoint: 1200, name: DESKTOP),
        ResponsiveBreakpoint(breakpoint: 2460, name: "4K", scale: true),
    ],
)

An arbitrary number of breakpoints can be set. Resizing/scaling behavior can be mixed and matched.

  • below 450: resize on small screens to avoid cramp and overflow errors.
  • 800-450: resize on phones for native widget sizes.
  • 1000-800: scale on tablets to avoid elements appearing too small.
  • 1200-1000: resize on desktops to use available space.
  • 2460+: scale on extra large 4K displays so text is still legible and widgets are not spaced too far apart.

About

Responsive Framework was created out of a desire for a better way to manage responsiveness. The ability to automatically adapt UI to different sizes opens up a world of possibilities. Here at Codelessly, we're working on #NoCode and code generation automation tools to increase productivity. If you are interested in building a website builder powered by computer vision, drop us a line below 😎

Responsive Framework is licensed under Zero-Clause BSD and released as Emailware. If you like this project or it helped you, please subscribe to updates. Although it is not required, you might miss the goodies we share!

Badges 🏆

Now you can proudly display the time and headache saved by using Responsive Framework with a supporter's badge.

Pub release

[![Flutter Responsive](https://img.shields.io/badge/flutter-responsive-brightgreen.svg?style=flat-square)](https://github.com/Codelessly/ResponsiveFramework)

Built Responsive

<a href="https://github.com/Codelessly/ResponsiveFramework">
  <img alt="Built Responsive"
       src="https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Built%20Responsive%20Badge.png"/>
</a>

Built with Responsive Framework

<a href="https://github.com/Codelessly/ResponsiveFramework">
  <img alt="Built with Responsive Framework"
       src="https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Built%20with%20Responsive%20Badge.png"/>
</a>

Contributors ❤️

Design:

Development:

  • Ray Li
  • add yourself here by contributing

Sponsor: Codelessly - No Code Automation Tools

Codelessly Email Codelessly Website Codelessly Twitter Codelessly GitHub

Flutter is a game-changing technology that will revolutionize not just development, but software itself. A big thank you to the Flutter team for building such an amazing platform 💙

Flutter

License

BSD Zero Clause License

Copyright © 2020 Codelessly

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.

Project Statistics

Sourcerank 5
Repository Size 185 MB
Stars 119
Forks 8
Watchers 6
Open issues 2
Dependencies 2
Contributors 1
Tags 3
Created
Last updated
Last pushed

Top Contributors See all

Ray Li

Recent Tags See all

0.0.3 February 24, 2020
0.0.2 February 20, 2020
0.0.1 February 17, 2020

Something wrong with this page? Make a suggestion

Last synced: 2020-04-02 00:38:28 UTC

Login to resync this repository