go_responsive

Description:

go responsive

GoResponsive #
A simple but expressive responsive framework inspired by responsive_framework conitinal logics and context based responsive data & responsive_builder responsive widget with all supported breakpoint as parameters which will genrated by code generation.

Features #
GoResponsive makes responsive design easy by:

Generate GoResponsiveWidget with all defined breakpoint as optional parameters with and a required defaultWidget parameter.
Generate context.goResponsiveValue<T> extension method on BuildContext so can be used set typed value.
Generate context.is{breakpoint_name} extension methods on BuildContext so can be used with condition.
Generate GoResponsiveBreakpoints.{breakpoint_name} string fields for breakpoint names.

Getting started #



Package
Version




go_responsive



go_responsive_annotation



go_responsive_generator




dependencies:
...
go_responsive: <version>
go_responsive_annotation: <version>

dev_dependencies:
...
build_runner: <version>
go_responsive_generator: <version>

copied to clipboard
Uasage #


Define go_responsive.dart:
import 'package:flutter/widgets.dart';
import 'package:go_responsive/go_responsive.dart';
import 'package:go_responsive_annotation/go_responsive_annotation.dart';

part 'go_responsive.g.dart';

@goResponsive
const breakpoints = [
GoResponsiveBreakpoint(size: 600, name: 'compact'),
GoResponsiveBreakpoint(size: 840, name: 'medium'),
GoResponsiveBreakpoint(size: double.maxFinite, name: 'expanded'),
];
copied to clipboard


return GoResponsiveBuilder from MaterialApp builder function and set breakpoint to already defined breakpoints list from go_responsive.dart:
class App extends StatelessWidget {
const App({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
home: const Home(),
builder: (context, child) {
return GoResponsiveBuilder(
breakpoints: breakpoints,
child: child,
);
},
);
}
}
copied to clipboard


now run dart run build_runner build in console which will generate go_responsive.g.dart


then import go_responsive.dart can be use context.goResponsiveValue:
class Home extends StatelessWidget {
const Home({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: context.goResponsiveValue(
compact: Colors.red,
medium: Colors.green,
expanded: Colors.blue,
defaultValue: Colors.black,
),
),
);
}
}
copied to clipboard


use or GoResponsiveWidget
class Home2 extends StatelessWidget {
const Home2({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
body: GoResponsiveWidget(
compact: Container(color: Colors.red),
medium: Container(color: Colors.green),
expanded: Container(color: Colors.blue),
defaultWidget: Container(color: Colors.black),
),
);
}
}
copied to clipboard


or use context.is{breakpoint_name} with if else
class Home3 extends StatelessWidget {
const Home3({super.key});

@override
Widget build(BuildContext context) {
var color = Colors.black;

if (context.isCompact) {
color = Colors.red;
}

if (context.isMedium) {
color = Colors.green;
}

if (context.isExpanded) {
color = Colors.blue;
}

return Scaffold(
body: Container(color: color),
);
}
}
copied to clipboard


or use context.goResponsiveData and GoResponsiveBreakpoints.{breakpoint_name}
combination for custom conditions
class Home4 extends StatelessWidget {
const Home4({super.key});

@override
Widget build(BuildContext context) {
var color = Colors.black;

if (context.goResponsiveData
.smallerOrEqualTo(GoResponsiveBreakpoints.compact)) {
color = Colors.red;
}

if (context.goResponsiveData.between(
GoResponsiveBreakpoints.compact,
GoResponsiveBreakpoints.expanded,
)) {
color = Colors.green;
}

if (context.goResponsiveData.between(
GoResponsiveBreakpoints.medium,
GoResponsiveBreakpoints.expanded,
)) {
color = Colors.blue;
}

return Scaffold(
body: Container(color: color),
);
}
}
copied to clipboard


Conditions #

equals
between
largerThan
smmallerThan
largerOrEqualTo
smallerOrEqualTo

Tips #

Add **/**/.g.dart in .gitgonre to ignore all generated dart files

My other packages #
Time Picker Wheel Time Picker inspired by Oppo Clock app set alram time screen with full customization
Contributors #