el_responsive

Description:

el responsive

ElResponsive #
Flutter package for Responsive Layout. MediaQuery alternative that triggers rebuild only when the screen type changes, You set list of the screens for the package and the rebuild get trigges only when certain breakpoint of the screens reached instead of triggering it on every screen change (pixel by pixel)
Usage #

Add the latest version of package to your pubspec.yaml (and rundart pub get):

dependencies:
el_responsive: ^0.0.1
copied to clipboard

Import the package and use it in your Flutter App.

import 'package:el_responsive/el_responsive.dart';
copied to clipboard
How to use #

Add ElResponsiveContainer widget to top level of your app, and specify list of screens List<ElScreen> you want to listen to.
ElScreen has name and breakpoint value


name can be any type, example:

String (Example 1)
enum (Example 2)


breakpoint is of type int

ElResponsiveContainer(
screens: [
ElScreen(name: "mobile", breakpoint: 480),
ElScreen(name: "tablet", breakpoint: 768),
ElScreen(name: "desktop", breakpoint: 1024),
],
child: const MyHomePage(),
),
copied to clipboard

Listen to ElResponsive inside build method the same way you use MediaQuery
Notice that we casted ElResponsive.of(context)!.screen to String in this example because the type of the name we gave to ElScreen is String

@override
Widget build(BuildContext context) {
final String screenType = ElResponsive.of(context)!.screen as String;

return .......
copied to clipboard
This widget now will get rebuilt only when the screen type we provided changes instead of rebuilding on every single pixel change when using MediaQuery.
Examples #

Checkout the full exmaple that uses screen's name as String in here
the full example that uses screen's name as enum in here