responsive_design 0.2.6 icon indicating copy to clipboard operation
responsive_design: ^0.2.6 copied to clipboard

Create responsive applications using different widgets that adapt to different screen densities.

responsive_design #

Create responsive applications using different widgets that adapt to different screen sizes.

Getting Started #

pub package

Add dependency on your pubspec.yaml file

dependencies:
  responsive_design:

Important! #

Since version 0.1.0 the ResponsiveSettings class is no longer used to manage change points. Instead use ScreenChangePoints, check example for more details.

Add your own settings #

Manage global the responsive screen change points with ResponsiveSettings class.

void main() {
  // Global Settings
  ResponsiveSettings.instance.setCustomSettings(
    screenChangePoints: const ScreenChangePoints(
      desktopChangePoint: 1150.0,
      tabletChangePoint: 625.0,
      watchChangePoint: 250.0,
    ),
  );
  runApp(const MyApp());
}

Use the responsive widget #

The responsive widget allows you to have different layouts for each device.

const ResponsiveWidget(  
  // If don't set the global values will be applied, if do not exist global values,
  // the default values will be applied.
  screenChangePoints: ScreenChangePoints(),
  desktop: Scaffold(
    body: Center(
      child: Text(
        'Desktop screen',
        style: TextStyle(
          color: Colors.black,
          fontSize: 25.0,
        ),
      ),
    ),
  ),
  phone: Scaffold(
    body: Center(
      child: Text(
        'Phone screen',
        style: TextStyle(
          color: Colors.amber,
          fontSize: 25.0,
        ),
      ),
    ),
  ),
  tablet: Scaffold(
    body: Center(
      child: Text(
        'Tablet screen',
        style: TextStyle(
          color: Colors.greenAccent,
          fontSize: 25.0,
        ),
      ),
    ),
  ),
  watch: Scaffold(
    body: Center(
      child: Text(
        'Watch screen',
        style: TextStyle(
          color: Colors.blueAccent,
          fontSize: 25.0,
        ),
      ),
    ),
  ),
);

Responsive Widget

Use only responsive app bar #

The responsive app bar allows to adapt the top tool bar to all screens.

const Scaffold(
  appBar: ResponsiveAppBar(
    // If don't set the global values will be applied, if do not exist global values,
    // the default values will be applied.
    screenChangePoints: ScreenChangePoints(),
    title: Text('Responsive app bar'),
    actions: [
      AppBarAction(
        Center(child: Text('About')),
      ),
      AppBarAction(
        SizedBox(width: 16.0),
        showInAllScreens: true,
      ),
      AppBarAction(
        Icon(Icons.brightness_auto_outlined),
        showInAllScreens: true,
      ),
      AppBarAction(
        SizedBox(width: 16.0),
        showInAllScreens: true,
      ),
    ],
  ),
);

Responsive Widget

2
likes
135
pub points
22%
popularity

Publisher

verified publisher iconalexastudillo.com

Create responsive applications using different widgets that adapt to different screen densities.

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.BSD-2-Clause-Views (LICENSE)

Dependencies

flutter

More

Packages that depend on responsive_design