flutter_responsive 0.0.6

  • Readme
  • Changelog
  • Example
  • Installing
  • 84

About flutter_responsive plugin #

example_6 example_7

This plugin provides a easy and productive way to work with responsive layouts for Flutter Applications in mobile, desktop and web, allowing your layout to adapt and wrap widgets ( Container, Rows, Columns and RichText ) referent to the size of his parent element.

Made by Rafael Setragni to all Flutter's Community.

Licensing #

This project follows the GNU General Public License V3, wich means you can change the entire project the way as you want to, but you need to share your improvements back to the community.

To share your improvements, please first do a Fork of this project, change what you need to and finally do a pull request. And don´t let to share your ideas and needs on "Issues" page, even before to start your changes.

IMPORTANT NOTES: #

  • This plugin was based on Bootstrap Web Project, but do not implement all its features (not yet).
  • The column's responsivity is based on his closest parent widget size, not over the screen size, such as Bootstrap.
  • All the widgets contains margin, padding, width, height (maximum and minimum edges), such as div Html element.
  • Fell free to improve and change this project.

How to Use #

Add the dependency bellow into your pubspec.yaml file.

dependencies:
  flutter_responsive: ^0.0.6 #Please, ensure to use the most updated version

Add the reference into your .dart files

import 'package:flutter_responsive/flutter_responsive.dart';

Use the Widgets ResponsiveContainer, ResponsiveRow, ResponsiveCol and JSX as the way you want to.

Screen Sizes #

This plugin was based on Bootstrap web project and split the screen in 12 columns, considering 7 screen sizes:

  • US - Ultra Small Screens - 0px to 309px
  • XS - Extra Small Screens - 310px to 575px
  • SM - Small Screens - 576px to 767px
  • MD - Medium Screens - 768px to 991px
  • LG - Large Small Screens - 992px to 1199px
  • XL - Extra Large Screens - 1200px to 1999px
  • UL - Ultra Large Screens - 2000px and beyond

example_1 example_2 example_3 example_4

Personalizing limits (Optional) #

All the limits could be personalized as you need, changing the limit Hashmap into ResponsiveScreen class.

/* Map<String, double> */
ResponsiveScreen.limits = {
    'us': 0.00,
    // Smart watches
    'xs': 310.00,
    // Small phones (5c)
    'sm': 576.00,
    // Medium phones
    'md': 768.00,
    // Large phones (iPhone X)
    'lg': 992.00,
    // Tablets
    'xl': 1200.00,
    // Laptops
    'ul': 2000.00,
    // Desktops and TVs 4K
  };

Grid Usage #

This plugin have 3 major grid elements:

  • ResponsiveContainer: Container to all page elements, such as Rows and Columns, centralizing the content and beeing limited to a maximum width size
ResponsiveContainer(

  // Determines the container's limit size
  widthLimit: ResponsiveScreen.limits['lg'],
  margin: EdgeInsets.symmetric(horizontal: 10),
  
  children: <Widget>[
  
    ResponsiveRow(),
    ResponsiveRow(),
    ResponsiveRow(),
    
  ]
)
  • ResponsiveRow: Container wich contains many columns or even other widget. OBS: Its not necessary to wrap inner widgets into a ResponsiveCol object.
ResponsiveRow(

  margin: EdgeInsets.only(top: 20, bottom: 5),
  
  children: <Widget>[
  
    ResponsiveCol(),
    ResponsiveCol(),
    ResponsiveCol(),
    
    Text('It´s fine to use another widget directly inside a ResponsiveRow', style: JSXTypography.q)
  ]
),
  • ResponsiveCol:
ResponsiveCol(
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(10),
  backgroundColor: Colors.blue,
  gridSizes: {
      'xs' : 4,
      'sm' : 3,
      'lg' : 2,
      'xl' : 1,
  },
  children: [
      Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit', style: JSXTypography.h2)
  ]
)

Full Example #

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

class HomePage extends StatefulWidget {
  @override
  _HomePage createState() => _HomePage();
}

class _HomePage extends State<HomePage> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    /*create 12 columns*/
    List<Widget> responsiveGridExample =

      /*repeat 12 times*/
      List<int>.generate(12, (index) => index).map((colIndex) =>
          ResponsiveCol(
              padding: EdgeInsets.all(10),
              backgroundColor: Colors.blue,
              gridSizes: {
                'xs' : 4,
                'sm' : 3,
                'lg' : 2,
                'xl' : 1,
              },
              children: [
                Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit')
              ]
          )
      ).toList();

    MediaQueryData mediaQuery = MediaQuery.of(context);

    return Scaffold(
        appBar: AppBar(
          title: const Text('Home', overflow: TextOverflow.ellipsis),
        ),
        body: Container(
          color: Color(0xFFCCCCCC),
          child: ListView(
            children: <Widget>[
              ResponsiveContainer(
                margin: EdgeInsets.symmetric(vertical: 10),
                padding: EdgeInsets.symmetric(horizontal: 10),
                backgroundColor: Colors.white,
                widthLimit: mediaQuery.size.width * 0.95,
                children: <Widget>[
                  ResponsiveRow(
                    margin: EdgeInsets.symmetric(vertical: 10),
                    children: <Widget>[

                      ResponsiveCol(
                          padding: EdgeInsets.all(10),
                          margin: EdgeInsets.only(bottom: 20),
                          backgroundColor: Colors.blueGrey,
                          children: [
                            Text('Flutter Responsive Layout', style: JSXTypography.h4.merge(TextStyle(color: Colors.white)))
                          ]
                      ),
                    ]
                  ),
                  ResponsiveRow(
                    margin: EdgeInsets.symmetric(vertical: 10),
                    children: <Widget>[

                      // By default, the column occupies the entire row, always
                      ResponsiveCol(
                        children: [
                          JSX(
                            shrinkToFit: true,
                            padding: EdgeInsets.only(bottom: 20),
                            stylesheet: {
                              'h3': JSXStylesheet(
                                  textStyle: TextStyle(color: Theme.of(context).primaryColor),
                                  displayLine: DisplayLine.block
                              ),
                              'h6': JSXStylesheet(
                                  textStyle: TextStyle(color: Theme.of(context).primaryColor),
                                  displayLine: DisplayLine.block
                              )
                            },
                            margin: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
                            text:
                            '<div>'
                                '<h3>Responsive Layouts</h3><h6>for <i>Flutter</i></h6>'
                                '<br><br>'
                                '<p>This <b>RichText</b> was easily produced and personalized using pure HTML</p>'
                                '<p>Bellow there is an example of 12 columns, wich changes the amount of each line depending of his father´s widget size.</p>'
                            '</div>',
                          )
                        ]
                      )

                    ]..addAll(
                        responsiveGridExample
                    )
                  )
                ],
              )
            ],
          ),
        )
    );
  }
}

Final result: #

example_9

How to run the plugin example #

This project is a starting point for a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

To run the full example App, wich contains performance and case tests, do the steps bellow:

  • Clone this project into your local machine using Github Desktop or any other git program of your preference.
  • Download Android Studio and the last Flutter SDK into your local machine. Configure they to works properly such as this article here
  • Run flutter pub get to update all the dependencies
  • Debug the file example/lib/main.dart or any of the unity case tests located on test folder on emulator or real device.
  • To run properly the performance tests, please run the app using flutter run --release

0.0.6 #

  • The JSX widget was separated in a different project called flutter_jsx to allow both plugins to be used and improved separately.

0.0.5+1 #

  • Implemented hashcode comparision methods to JSX_node_text and JSX_node_element classes.

0.0.5 #

  • Flutter HTML parser was successfully replaced by an new JSX parser, implemented on this plugin, to fix self-closed HTML tags node's construction.

0.0.4 #

  • Added widget's HTML tag, to allow developers to include any Flutter's widget inside the text.

0.0.3+3 #

  • Dartdoc finished for all classes

0.0.3+2 #

  • Class JSXStylesheet fully documented using Dartdoc

0.0.3+1 #

  • Starting to use Dartdoc to generate respective documentation about the project Classes

0.0.3 #

  • Sandbox page implemented to test visual properties.
  • Shrink property removed from JSX due to not be intuitive enough.
  • Display property adopted as global plugin standard to define if JSX should occupy all line or not, copying the display Html div property.
  • Case tests to Cascade Stylesheet implemented

0.0.2+2 #

  • Improvements on source to increase Pub Dev score. Also the README file was completed.

0.0.2+1 #

  • Improvements on source to increase Pub Dev score, such as format source and @immutable objects with non-final variables

0.0.2 #

  • Fixed english errors on example app.
  • Established standard values for Container and Row bool variables.

0.0.1 #

  • TODO: Describe initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_responsive_example/pages/home_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyApp createState() => _MyApp();
}
class _MyApp extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Responsive Example',
      theme: ThemeData(
        primaryColor: Color.fromARGB(255, 86, 61, 124),
        accentColor: Colors.black,

        // Define the default font family.
        fontFamily: 'Roboto',
      ),
      home: HomePage(),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_responsive: ^0.0.6

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_responsive/flutter_responsive.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
72
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
84
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test