responsive_context 0.2.0

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.

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.