responsive 0.1.7

Allow to easily build a responsive Flutter UI

responsive

Allow to easily build a responsive Flutter UI, made by Marvin Quevedo and Víctor Guardiolaof FlutterEs Community.

Este paquete ha sido creado por la comunidad de Flutter en Español, si deseas ser parte de nosotros, puedes visitar cualquiera de estos links:

Facebook

Slack

Twitter

www.flutter-es.io

Telegram

Add dependency

dependencies:
  responsive: 0.1.6

Easy to use

import 'package:flutter/material.dart';
import 'package:responsive/responsive.dart';
import 'package:responsive/flex_widget.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Responsive Example',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(),
          body: ListView(
            children: <Widget>[
              ResponsiveRow(
                columnsCount: 12,
                crossAxisAlignment: WrapCrossAlignment.center,
                children: <Widget>[
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.amber,
                    ),
                    xs: 4,
                    xsOffset: 2,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    xsLandOffset: 0,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.red,
                    ),
                    xs: 6,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.indigo,
                    ),
                    xs: 6,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.lime,
                    ),
                    xs: 6,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.teal,
                    ),
                    xs: 6,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.green,
                    ),
                    xs: 6,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.deepOrange,
                    ),
                    xs: 6,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.amber,
                    ),
                    xs: 6,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.grey,
                    ),
                    xs: 6,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.black,
                    ),
                    xs: 6,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.brown,
                    ),
                    xs: 6,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                  FlexWidget(
                    child: Container(
                      height: 100,
                      color: Colors.cyan,
                    ),
                    xs: 6,
                    sm: 3,
                    md: 2,
                    lg: 1,
                    xsLand: 4,
                    smLand: 2,
                    mdLand: 1,
                    lgLand: 1,
                  ),
                ],
              )
            ],
          ),
        ));
  }
}