responsive_page

Description:

responsive page

Responsive Stateful or Stateless Widget
Getting Started #
The responsive_widget package contains widgets that allows you to create a responsive UI.
In this package created for create page structures for different devices (or sizes).
With this package, you need to overwrite 4 different build methods :

buildMobile
buildWideMobileOrTablet
buildWideTabletOrDesktop
buildDesktop

This package should only be used where the entire structure needs to be changed when resizing.
Save State #
For my purpose of creating this package :
The state is not lost in case of size change (especially on the web).

Import It #
import 'package:responsive_page/responsive_widget.dart';
copied to clipboard
Create Page #
Set Global Breakpoints #
void main() {
responsiveWidgetController.setDefaultBreakpoints(
mobile: 500,
wideMobileOrTablet: 800,
wideTabletOrDesktop: 1150
);
runApp(const MyApp());
}

copied to clipboard
Stateful Widget #
In this package , state does not disappear in structure changes.
Replace with ResponsiveState instead of State only.
After than create missing overrides.
class ResponsiveWelcomePage extends StatefulWidget {

@override
_ResponsiveWelcomePageState createState() => _ResponsiveWelcomePageState();
}

// !!! Extends ResponsiveState
class _ResponsiveWelcomePageState
extends ResponsiveState<ResponsiveWelcomePage> {
@override
Widget buildDesktop(BuildContext context) {}

@override
Widget buildMobile(BuildContext context) {}

@override
Widget buildWideMobileOrTablet(BuildContext context) {}

@override
Widget buildWideTabletOrDesktop(BuildContext context) {}
}
copied to clipboard
Stateless Widget #
Extends ResponsiveWidget and create missing overrides.
//Extends [ResponsiveWidget]
class ResponsiveStatelessExample extends ResponsiveWidget {
// Overrides
}
copied to clipboard
Reducing Varieties
//Extends [ResponsiveWidget]
class ResponsiveStatelessExample extends ResponsiveWidget {
// Overrides
@override
Widget buildMobile(BuildContext context) {
return Container();
}

@override
Widget buildWideMobileOrTablet(BuildContext context) => buildMobile();

}
copied to clipboard