responsive_context 0.1.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 87

responsive #

This is a resposive extension which allow you to spefic screen and screensize in your flutter application. You do not need to remember size width.

Example #

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: '/',
      routes: {
        '/': (_) => DatePickerPage(),
      },
    );
  }
}

class DatePickerPage extends StatefulWidget {
  @override
  _DatePickerPageState createState() => _DatePickerPageState();
}

class _DatePickerPageState extends State<DatePickerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Responsive Context"),
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                width: 600,
                // height: 600,
                // width: MediaQuery.of(context).size.width,
                child: LayoutBuilder(
                  builder: (ctx, constrain) {
                    // return Text("${!ctx.isExtraLarge? "HIDE" : "SHOW"}");
                    return GridView(
                        shrinkWrap: true,
                        padding: EdgeInsets.all(15),
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: constrain.isExtraSmall
                                ? 1
                                : constrain.isSmall
                                    ? 2
                                    : constrain.isMedium
                                        ? 3
                                        : constrain.isLarge ? 4 : 5,
                            crossAxisSpacing: 15,
                            mainAxisSpacing: 15),
                        children: List.filled(
                            5,
                            Container(
                              color: Colors.blue,
                              alignment: Alignment.center,
                              child: Text(
                                "${constrain.screenSize} based on constrain",
                                textAlign: TextAlign.center,
                              ),
                            )).toList());
                  },
                ),
              ),
              Container(
                width: 600,
                // height: 600,
                // width: MediaQuery.of(context).size.width,
                child: GridView(
                    shrinkWrap: true,
                    padding: EdgeInsets.all(15),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: context.isExtraSmall
                            ? 1
                            : context.isSmall
                                ? 2
                                : context.isMedium
                                    ? 3
                                    : context.isLarge ? 4 : 5,
                        crossAxisSpacing: 15,
                        mainAxisSpacing: 15),
                    children: List.filled(
                        5,
                        Container(
                          color: Colors.red,
                          alignment: Alignment.center,
                          child: Text(
                            "${context.screenSize} based on context",
                            textAlign: TextAlign.center,
                          ),
                        )).toList()),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

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

[0.1.2] #

  • fix uri

[0.1.1] #

  • edit xs and add maxWidth to context

[0.1.0] - TODO: Add release date. #

  • TODO: Describe initial release.

example/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: '/',
      routes: {
        '/': (_) => DatePickerPage(),
      },
    );
  }
}

class DatePickerPage extends StatefulWidget {
  @override
  _DatePickerPageState createState() => _DatePickerPageState();
}

class _DatePickerPageState extends State<DatePickerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Responsive Context"),
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                width: 600,
                // height: 600,
                // width: MediaQuery.of(context).size.width,
                child: LayoutBuilder(
                  builder: (ctx, constrain) {
                    // return Text("${!ctx.isExtraLarge? "HIDE" : "SHOW"}");
                    return GridView(
                        shrinkWrap: true,
                        padding: EdgeInsets.all(15),
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: constrain.isExtraSmall
                                ? 1
                                : constrain.isSmall
                                    ? 2
                                    : constrain.isMedium
                                        ? 3
                                        : constrain.isLarge ? 4 : 5,
                            crossAxisSpacing: 15,
                            mainAxisSpacing: 15),
                        children: List.filled(
                            5,
                            Container(
                              color: Colors.blue,
                              alignment: Alignment.center,
                              child: Text(
                                "${constrain.screenSize} based on constrain",
                                textAlign: TextAlign.center,
                              ),
                            )).toList());
                  },
                ),
              ),
              Container(
                width: 600,
                // height: 600,
                // width: MediaQuery.of(context).size.width,
                child: GridView(
                    shrinkWrap: true,
                    padding: EdgeInsets.all(15),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: context.isExtraSmall
                            ? 1
                            : context.isSmall
                                ? 2
                                : context.isMedium
                                    ? 3
                                    : context.isLarge ? 4 : 5,
                        crossAxisSpacing: 15,
                        mainAxisSpacing: 15),
                    children: List.filled(
                        5,
                        Container(
                          color: Colors.red,
                          alignment: Alignment.center,
                          child: Text(
                            "${context.screenSize} based on context",
                            textAlign: TextAlign.center,
                          ),
                        )).toList()),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  responsive_context: ^0.1.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:responsive_context/responsive_context.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
74
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]
87
Learn more about scoring.

We analyzed this package on Jul 10, 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:

  • responsive_context that is a package requiring null.

Health issues and suggestions

Document public APIs. (-0.23 points)

37 out of 38 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

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