responsive_design

Description:

responsive design

responsive_design #
Create responsive applications using different widgets that adapt to different screen sizes.
Getting Started #

Add dependency on your pubspec.yaml file
dependencies:
responsive_design:
copied to clipboard
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());
}
copied to clipboard
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,
),
),
),
),
);
copied to clipboard

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,
),
],
),
);
copied to clipboard