responsively 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • new63

responsively #

Bring responsive widgets to flutter! this package has some widgets to make a simple responsive ui

Getting Started #

first, add responsively to your pubspec dependencies.

To import responsively:

import 'package:responsively/responsively.dart';

ResponsiveRow #

Responsive grid look like bootstrap grid, support width, offset and order for diffrent BreakPoints

ResponsiveRow(
 totalColumn = 12, // you can change total columns as you want
  mainAxisSpacing = 0, // horizontal column spacing
  crossAxisSpacing = 0, //vertical column spacing,
  mainAxisAlignment = MainAxisResponsiveRowAlignment.start, // horizontal alignment of columns
  crossAxisAlignment = CrossAxisResponsiveRowAlignment.start, // vertical alignment of columns
  @required children, // your grid columns
);

examples : #

  1. simple grid :
ResponsiveRow(
  children: [
    ResponsiveColumn(
      width: ColumnWidth(
        lgUp: 3, // fill 3 from totalColumn column in large screen and bigger
        mdUp: 4, // fill 4 from totalColumn column in medium screen and bigger
        smUp: 6, // fill 6 from totalColumn column in small screen and bigger
        defaultValue: 12, // if device size not exist in your definition defaultValue is your column width
      ),
      child: Container(
        height: 100,
        color: Colors.purple,
      )
    ),
    ResponsiveColumn(
      width: ColumnWidth(
        mdUp: 4, // just in medium screen and bigger fill 4 from totalColumn column, otherwise because defaultValue not defined fill totalColumn from totalColumn column in other screen sizes
      ),
      child: Container(
        height: 100,
        color: Colors.deepOrange,
      )
    ),
  ],
),

note : ColumnWidth has many properties, all properties is optional, if there is no any value, defaultValue used, if defaultValue not defined, it's totalColumn.

list ColumnWidth properties :

ColumnWidth(
  int xs, // just in extra small size
  int xsUp, // extra small size and bigger
  int sm, // just in small size
  int smUp, // small size and bigger
  int smDown, // small size and smaller
  int md, // just in medium size
  int mdUp, // medium size and bigger
  int mdDown, // medium size and smaller
  int lg, // just in large size
  int lgUp, // large size and bigger
  int lgDown, // large size and smaller
  int xl, // just in extra large size
  int defaultValue, // fallback value
),
  1. grid combine order and offset feature :
ResponsiveRow(
  children: [
    ResponsiveColumn(
      width: ColumnWidth(
        lgUp: 3, // fill 3 from totalColumn column in large screen and bigger
        mdUp: 4, // fill 4 from totalColumn column in medium screen and bigger
        smUp: 6, // fill 6 from totalColumn column in small screen and bigger
        defaultValue: 12, // if device size not exist in your definition defaultValue is your column width
      ),
      order: ColumnOrder(
        lgUp: 0,
        mdUp: 1,
        smUp: 0,
        xsUp: 1,
      ),
      offset: ColumnOffset(
        lgUp: 2,
      ),
      child: Container(
        height: 100,
        color: Colors.purple,
      )
    ),
    ResponsiveColumn(
      width: ColumnWidth(
        lgUp: 3, // fill 3 from totalColumn column in large screen and bigger
        mdUp: 4, // fill 4 from totalColumn column in medium screen and bigger
        smUp: 6, // fill 6 from totalColumn column in small screen and bigger
      ),
      order: ColumnOrder(
        lgUp: 1,
        mdUp: 0,
        smUp: 1,
        xsUp: 0,
      ),
      offset: ColumnOffset(
        mdUp: 1,
      ),
      child: Container(
        height: 100,
        color: Colors.deepOrange,
      )
    ),
  ],
),

note : ColumnOrder has many properties, all properties is optional, if there is no any value, defaultValue used, if defaultValue not defined, it's null ( computed by index )

list ColumnOrder properties :

ColumnOrder(
  int xs, // just in extra small size
  int xsUp, // extra small size and bigger
  int sm, // just in small size
  int smUp, // small size and bigger
  int smDown, // small size and smaller
  int md, // just in medium size
  int mdUp, // medium size and bigger
  int mdDown, // medium size and smaller
  int lg, // just in large size
  int lgUp, // large size and bigger
  int lgDown, // large size and smaller
  int xl, // just in extra large size
  int defaultValue, // fallback value
),

ColumnOffset has many properties, all properties is optional, if there is no any value, defaultValue used, if defaultValue not defined, it's 0

list ColumnOrder properties :

ColumnOffset(
  int xs, // just in extra small size
  int xsUp, // extra small size and bigger
  int sm, // just in small size
  int smUp, // small size and bigger
  int smDown, // small size and smaller
  int md, // just in medium size
  int mdUp, // medium size and bigger
  int mdDown, // medium size and smaller
  int lg, // just in large size
  int lgUp, // large size and bigger
  int lgDown, // large size and smaller
  int xl, // just in extra large size
  int defaultValue, // fallback value
),

ResponsiveWidget #

this widget give value by current BreakPoint

ResponsiveWidget<T>(
  ResponsiveWidgetBuilder<T> builder,
  ResponsiveInfo<T> value,
);
ResponsiveWidgetBuilder<T> = Widget Function(BuildContext context, T value);
ResponsiveInfo<T>(
  T xs, // just in extra small size
  T xsUp, // extra small size and bigger
  T sm, // just in small size
  T smUp, // small size and bigger
  T smDown, // small size and smaller
  T md, // just in medium size
  T mdUp, // medium size and bigger
  T mdDown, // medium size and smaller
  T lg, // just in large size
  T lgUp, // large size and bigger
  T lgDown, // large size and smaller
  T xl, // just in extra large size
  T defaultValue, // fallback value
),

examples : #

  1. in this example when screen size is lgUp color is Colors.purple, when screen size is mdUp color is Colors.deepOrange otherwise color is Colors.black
ResponsiveWidget<Color>(
  value: ResponsiveInfo(
    lgUp: Colors.purple,
    mdUp: Colors.deepOrange,
    defaultValue: Colors.black,
  ),
  builder: (context, color) {
    return Container(
      height: 100,
      color: color,
    );
  },
)
  1. in this example when screen size is mdUp textAlign is TextAlign.right otherwise TextAlign.left
ResponsiveWidget<TextAlign>(
  value: ResponsiveInfo(
    mdUp: TextAlign.right,
    defaultValue: TextAlign.left,
  ),
  builder: (context, textAlign) {
    return Text(
      "SAMPLE",
      textAlign: textAlign,
    );
  },
)

ResponsiveBuilder #

this widget give current BP and you can build your UI by current BreakPoint

ResponsiveBuilder(
  BreakPointBuilder builder,
);
BreakPointBuilder = Widget Function(BuildContext context, BP breakPoint);

example :

ResponsiveBuilder(
  builder: (context, bp) {
    if(bp == BP.lg) {
      return Text('YOUR ARE IN LG BREAKPOINT');
    }
    return SizedBox();
  },
),

ResponsiveSizedBox #

responsive SizedBox, width of SizedBox get by current BreakPoint

ResponsiveSizedBox(
  ResponsiveWidth width,
  double height,
  Widget child,
);
ResponsiveWidth(
  int xs, // just in extra small size
  int xsUp, // extra small size and bigger
  int sm, // just in small size
  int smUp, // small size and bigger
  int smDown, // small size and smaller
  int md, // just in medium size
  int mdUp, // medium size and bigger
  int mdDown, // medium size and smaller
  int lg, // just in large size
  int lgUp, // large size and bigger
  int lgDown, // large size and smaller
  int xl, // just in extra large size
  int defaultValue, // fallback value
),

example :

in this example if screen size is lgUp, width is 50.0, if screen size is mdUp width is 40.0 otherwise 30.0

ResponsiveSizedBox(
  width: ResponsiveWidth(
    lgUp: 50.0,
    mdUp: 40.0,
    defaultValue: 30.0
  ),
  child: Container(
    height: 100,
    color: Colors.red,
  ),
),

Config #

Default BreakPoint defined like a BootStrap

width
BP.xs0 <= w < 576
BP.sm576 <= w < 768
BP.md768 <= w < 992
BP.lg992 <= w < 1200
BP.xl1200 <= w < double.infinity

but you can change it :

void main() {
  Responsively.instance.breakPoints = BreakPoints(
    xs: 576.0,
    sm: 768.0,
    md: 992.0,
    lg: 1200.0,
    xl: double.infinity
  );
  runApp(MyApp());
}

[1.0.2] - 2020-06-20 #

minor change to pass pub.dev analyzes

[1.0.1] - 2020-06-20 #

minor change to improve pub.dev page

[1.0.0] - 2020-06-20 #

Initial release

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:responsively/responsively.dart';



void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsively Widget Catalog'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ResponsiveRow(
              mainAxisSpacing: 8,
              crossAxisSpacing: 8,
              children: [
                ResponsiveColumnBuilder(
                  width: ColumnWidth(
                    xl: 2,
                    lgUp: 3,
                    mdUp: 4,
                    smUp: 6,
                  ),
                  order: ColumnOrder(
                    lgUp: 0,
                    mdUp: 1,
                    smUp: 3,
                  ),
                  builder: (context, info) {
                    return ChildItem(
                      color: Colors.blueGrey,
                      info: info,
                    );
                  }
                ),
                ResponsiveColumnBuilder(
                  width: ColumnWidth(
                    xl: 3,
                    lgUp: 3,
                    mdUp: 4,
                    smUp: 6,
                  ),
                  order: ColumnOrder(
                    lgUp: 1,
                    mdUp: 2,
                    smUp: 1,
                  ),
                  offset: ColumnOffset(
                    xl: 1,
                  ),
                  builder: (context, info) {
                    return ChildItem(
                      color: Colors.green[600],
                      info: info,
                    );
                  }
                ),
                ResponsiveColumnBuilder(
                  width: ColumnWidth(
                    xl: 2,
                    lgUp: 3,
                    mdUp: 4,
                    smUp: 6,
                  ),
                  order: ColumnOrder(
                    lgUp: 2,
                    mdUp: 2,
                    smUp: 0,
                  ),
                  offset: ColumnOffset(
                    xl: 1,
                  ),
                  builder: (context, info) {
                    return ChildItem(
                      color: Colors.orange[600],
                      info: info,
                    );
                  }
                ),
                ResponsiveColumnBuilder(
                  width: ColumnWidth(
                    xl: 2,
                    lgUp: 3,
                    mdUp: 4,
                    smUp: 6,
                  ),
                  order: ColumnOrder(
                    lgUp: 3,
                    mdUp: 0,
                    smUp: 1,
                  ),
                  offset: ColumnOffset(
                    xl: 1,
                  ),
                  builder: (context, info) {
                    return ChildItem(
                      color: Colors.purple[600],
                      info: info,
                    );
                  }
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class ChildItem extends StatelessWidget {
  final Color color;
  final ColumnInfo info;

  ChildItem({
    @required this.color,
    @required this.info,
  });

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: Theme.of(context).textTheme.bodyText1.copyWith(
        color: Colors.white,
      ),
      child: Container(
        color: color,
        alignment: Alignment.center,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              alignment: Alignment.center,
              color: Colors.black.withOpacity(0.1),
              padding: const EdgeInsets.all(8),
              child: Text(
                info.breakPoint.toString(),
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(4),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(4),
                    child: Text(
                      "width: ${info.width}",
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(4.0),
                    child: Text(
                      "order: ${info.order}",
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(4.0),
                    child: Text(
                      "offset: ${info.offset}",
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  responsively: ^1.0.2

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:responsively/responsively.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
25
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
63
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • responsively that is a package requiring null.

Health suggestions

Format lib/responsively.dart.

Run flutter format to format lib/responsively.dart.

Format lib/src/bp.dart.

Run flutter format to format lib/src/bp.dart.

Format lib/src/breakpoints.dart.

Run flutter format to format lib/src/breakpoints.dart.

Fix additional 14 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/src/helpers.dart (Run flutter format to format lib/src/helpers.dart.)
  • lib/src/models/column_info.dart (Run flutter format to format lib/src/models/column_info.dart.)
  • lib/src/models/column_offset.dart (Run flutter format to format lib/src/models/column_offset.dart.)
  • lib/src/models/column_order.dart (Run flutter format to format lib/src/models/column_order.dart.)
  • lib/src/models/column_width.dart (Run flutter format to format lib/src/models/column_width.dart.)
  • lib/src/models/models.dart (Run flutter format to format lib/src/models/models.dart.)
  • lib/src/models/responsive_info.dart (Run flutter format to format lib/src/models/responsive_info.dart.)
  • lib/src/models/responsive_width.dart (Run flutter format to format lib/src/models/responsive_width.dart.)
  • lib/src/widgets/responsive_builder.dart (Run flutter format to format lib/src/widgets/responsive_builder.dart.)
  • lib/src/widgets/responsive_column.dart (Run flutter format to format lib/src/widgets/responsive_column.dart.)
  • lib/src/widgets/responsive_column_base.dart (Run flutter format to format lib/src/widgets/responsive_column_base.dart.)
  • lib/src/widgets/responsive_column_builder.dart (Run flutter format to format lib/src/widgets/responsive_column_builder.dart.)
  • lib/src/widgets/responsive_row.dart (Run flutter format to format lib/src/widgets/responsive_row.dart.)
  • lib/src/widgets/responsive_widget.dart (Run flutter format to format lib/src/widgets/responsive_widget.dart.)

Dependencies

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