Utils and widgets to make your flutter apps and websites fully responsive.

Overview

Super Responsive

SuperResponsive


A responsive library for Flutter that

  • is easy to use and easy to read
  • makes your app look great on all devices
  • makes your app more readable
  • makes your app more maintainable

Index

  1. Getting Started

Getting Started

Welcome to Super Responsive!!!

Getting started is very easy.

First, wrap your app in a Super Responsive widget.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SuperResponsive(
      breakPoints: BreakPoints(
        // you can add up to 6 breakpoints
        // first and second are required!
        first: 1200,
        second: 900,
        third: 600,
      ),
      child: MaterialApp(
        title: 'Super Responsive App',
        initialRoute: '/',
      ),
    );
  }
}

Extensions

// Num extensions

100.max(99) // clamps the value with a maximum value of 99

100.min(1) // clamps the value with a minimum value of 1

100.per(50) // return 50% of 100
// it can also be made like 100*0.5 but giving 
// a value between 0-100 can be better in other cases

// BoxConstraints extensions

constraints.perWidth(50) // return 50% of maxWidth

constraints.perHeight(10) // return 10% of maxHeight

// BuildContext extensions

context.breakpoints // breakpoints from the closest SuperResponsive widget

context.currentBreakpoint // it will retrun the current breakpoint

context.mediaQueryWidth // as in MediaQuery.of(context).size.width

context.mediaQueryHeight // as in MediaQuery.of(context).size.height
      
      ↓
      ↓
      ↓
      ↓
      ↓ More BuildContext extensions

Responsive Value

- responsiveValue()

In order to get a responsive design, we should have a responsive value. This value can be withing any range that we specify, For example:

If we want a container to have a width between 500 and 100, meaning the container will have a width of 500 when our screen width will be equal or greater to our first breakpoint, and it will have a width of 100 when our screen width will be equal or less than our last breakpoint (this one is going to be the last break point we specified).

...
/// in a more graphical way
/// breakpoints extremes -> [600, 1200]
/// our value's range -> [100, 500]
/// when screen width == 800 in the range of [600, 1200], 
/// this value will be mapped to the range of [100, 500]
/// and it will return the value = 233.333
/// all this calculation is made by the (mapValue) function,
/// that can also be used by you in any way you want to.

@override
Widget build(BuildContext context) {
  return Container(
    width: context.responsiveValue(100, 500),
    height: 300,
    color: Colors.red,
  );
}
...

- breakpoints.when()

In case you don't want to calculate this value in that way and want to assign specific values depending on the current breakpoint, you can use the when method inside the Breakpoints class.

...
@override
Widget build(BuildContext context) {
  return Container(
    // context.breakpoints will return the breakpoints
    // of the closest SuperResponsive widget in the widget tree
    width: context.breakpoints.when(
      // the current screen width
      // you could also use context.whenBreakpoints() which will
      // use as maxWidth the screen width automatically
      maxWidth: context.mediaQueryWidth,
      first: (breakpoint) => breakpoint*0.5, // 50% of the breakpoint
      second: (_) => 300, // 300px
      third: (_) => context.responsiveValue(100, 300), // or a responsive value
      fourth: (_) => 50, // we don't have a fourth breakpoint in our SuperResponsive widget,
      // so it will return the last valid case, in this case third: (_) => context.responsiveValue(100, 300)
    ),
    height: 300,
    color: Colors.red,
  );
}
...

- customResponsiveValue()

There is also the possibility to use a custom responsive value. Which will calculate the value based on the new breakpoint range that you specify and the value range.

...
@override
Widget build(BuildContext context) {
  return Container(
    width: context.customReponsiveValue(
    // you can use some of your breakpoints, or any
    // other value that you want
    breakpointsRange: (breakPoints) => 
        Range(breakpoints.second, breakpoints.first),
    valueRange: Range(100, 500),
  ),
    height: 300,
    color: Colors.red,
  );
}
...

Responsive Widget

...
@override
Widget build(BuildContext context) {
  return ResponsiveWidget(
    // The amount of widgets must be equal to the amount 
    // of breakpoints we have specified in our SuperResponsive widget
    children: [
      WidgetLarge(),
      WidgetMedium(),
      WidgetSmall(),
    ],
    // ! we can also specify new breakpoints for only this widget
    // ! this will override the breakpoints of the SuperResponsive widget
    // ! and the amount of children must be equal to these new breakpoints
    // breakpoints: BreakPoints(
    //   first: 1000,
    //   second: 800,
    //   third: 500,
    // ),
  );
}
...

Responsive Text

...
@override
Widget build(BuildContext context) {
  return ResponsiveText(
    text: "Super Responsive",
    fontSizeRange: Range(20, 30),
    // ! we can also specify custom breakpoints for only this widget
    // ! this means that the result of the responsive value set 
    // ! for the font size, will be set to the closest value of the
    // ! textBreakpoints. For example, if the value should be
    // ! 17, it will be set to 17 because it is the closest value from the 
    // ! set of textBreakpoints 
    // textBreakpoints: [
    // 30,
    // 15,
    // 20,
    // ]
  );
}
...

Responsive Gap

...
@override
Widget build(BuildContext context) {
  // ! it'll return a SizedBox square with dimension equal
  // ! to the responsive value of range [100, 300]
  return ResponsiveGap(100, 300);
  
  // ! you can also create an "INVERSE" gap, which will 
  // ! have as a dimension the inverse value. For example,
  // ! if the value is 300 and the range is [100, 300],
  // ! it will have a final value of 100
  return ResponsiveGap(100, 300, reversed: true);
}
...

Responsive Layout

With this widget you will be able to write complex layouts and make them easier to read, understand and maintain.

The concept is very simple, specify how many layouts you want, the children that will be available for those layouts , your breakpoints(which most of the time are your SuperResponsive breakpoints) and then you layouts.

...
@override
Widget build(BuildContext context) {
  return ResponsiveLayout(
    layoutCount: 3,
    children: [
      Widget0(),
      Widget1(),
      Widget2(),
      Widget3(),
      Widget4(),
    ],
    // ! you can use any breakpoints you want
    breakpoints: (breakpoints) => breakpoints,
    layouts: (child) => [
      // ! Some complex layout with multiple Rows and Columns
      Column(
        children: [
          // ! the function child() will return the child 
          // ! of that specific index => child(0) == Widget0()
          Row(children:[child(1), child(0)]).expanded(),
          // ! .expanded({int flex}) is an extension on Widget
          // ! it can be used if you want to wrap your widget inside 
          // ! an Expanded widget, it has been mainly created to make your
          // ! layout more readable and to be used by Columns or Rows
          Row(children:[child(2), child(2)]).expanded(flex: 2),
          // ! there is also the extension .flexible({int flex, FlexFit fit})
          child(3).flexible(flex: 2),
        ]   
      ),
      // ! some very simple layout
      Row(children:[child(3), child(3)]),
      // ! or just return one of your children
      child(4),
    ]
  );
}
...

Warning !!!!

DO NOT USE .expanded() and .flexible() on a widget that is already wrapped inside an Expanded or Flexible widget.

Doing this will cause unexpected behavior and very ugly errors!!!.

Roadmap

(a bit empty for the moment)

  • Add examples
  • Add tests
You might also like...

The easiest way to create your animated splash screen in a fully customizable way.

The easiest way to create your animated splash screen in a fully customizable way.

Animated Splash Screen Check it out at Pub.Dev Do it your way Assets image Custom Widget Url image IconData Or just change PageTransition and/or Splas

Nov 10, 2022

Github-apps-flutter - Github Apps Build Using bloc 8.0 and Github API

Github-apps-flutter - Github Apps Build Using bloc 8.0 and Github API

Github_apps Inspiration This app is made to build using bloc 8.0 and github API.

Apr 14, 2022

[Example APPS] Basic Flutter apps, for flutter devs.

[Example APPS] Basic Flutter apps, for flutter devs.

Show some ❤️ and star the repo to support the project This repository containing links of all the example apps demonstrating features/functionality/in

Jan 2, 2023

Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose

 Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose

Flutter-Apps-Collection This is a repository of a collection of apps made in flutter for learning purpose Some Screenshots . . . Apps build in Flutter

May 27, 2022

Projeto do curso Criação de Apps Android e iOS com Flutter 2021-Crie 14 Apps. Professor: Daniel Ciolfi

agenda_contatos Projeto do curso de Flutter Getting Started This project is a starting point for a Flutter application. A few resources to get you sta

Nov 27, 2021

Projeto do curso Criação de Apps Android e iOS com Flutter 2021-Crie 14 Apps. Professor: Daniel Ciolfi

busca_gifs A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

Nov 25, 2021

This is an apps that implements fundamental features of Flutter (Android Apps Only)

rpl_apps_flutter A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Dec 28, 2021

Quickly is build as a tool to enhance your Flutter UI development experience and make code easier

Quickly is build as a tool to enhance your Flutter UI development experience and make code easier. It is highly inspired by Bootstrap and Tailwind CSS. It also provide lots of extension methods on String, List and Map.

Oct 24, 2022

A Flutter package to make your text selectable for web and non-selectable for native builds.

PlatformText A Flutter package to make your text selectable for web and non-selectable for native builds. Features PlatformText returns Text or Select

Jun 9, 2022
Owner
Gustavo Guzmán
Gustavo Guzmán
A responsive scaffold widget that adjusts to your device size, for your flutter mobile and web apps.

scaffold_responsive A responsive scaffold widget that adjusts to your device size, for your flutter mobile and web apps. Check out the Live demo here

Tushar Sadhwani 9 Sep 27, 2022
A cross-platform Flutter widget for displaying websites. Optional navigation buttons.

Overview Gives you a cross-platform Flutter widget for displaying websites and other web content. Licensed under the Apache License 2.0. Links Github

Dint 11 Oct 23, 2022
Link-extractor - A Simple utility for extracting media urls from different websites

Link Extractor A Simple utility for extracting media urls from differennt social

Zain Ul Hassan 1 Feb 5, 2022
🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.

CarPlay with Flutter ?? Flutter Apps now on Apple CarPlay! flutter_carplay aims to make it safe to use iPhone apps made with Flutter in the car by int

Oğuzhan Atalay 156 Dec 26, 2022
Outlook Email App Redesign - Flutter Fully Responsive Design UI

Outlook Email App Redesign - Flutter Fully Responsive Design UI Watch it on YouTube Flutter web work on beta make sure you change your channel, Config

Abu Anwar 1.7k Dec 30, 2022
⚡FQuery is a powerful async state management solution for flutter. It caches, updates and fully manages asynchronous data in your flutter apps.

⚡ FQuery is a powerful async state management solution for flutter. It caches, updates and fully manages asynchronous data in your flutter apps. It ca

Piyush 21 Dec 22, 2022
A fully-featured Last.fm client and scrobbler with Shazam-like scrobbling, a collage generator, home screen widgets, and more!

Finale A fully-featured Last.fm client and scrobbler with Shazam-like scrobbling, a collage generator, and more! The app is available on iOS, Android,

Noah Rubin 66 Jan 5, 2023
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.

Figma to Code Most design to code plugins are bad, some are even paid. This project aims to raise the bar by generating responsive layouts in Tailwind

Bernardo Ferrari 2.8k Jan 4, 2023
Learn to make beautiful, native apps for Android & iOS

name title subtitle description speaker flutter Flutter Learn to make beautiful, native apps for Android & iOS Flutter is a cross-platform, mobile dev

Akshath Jain 5 Nov 4, 2019
A collection of Flutter Widgets that make multi screen user experiences easy to build

Multi Screen Layout for Flutter A collection of Widgets that make multi screen user experiences easy to build Supported Devices Surface Duo Surface Du

Jason Rai 75 Dec 1, 2022