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>
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'), ];
-
return
GoResponsiveBuilder
from MaterialApp builder function and set breakpoint to already definedbreakpoints
list fromgo_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, ); }, ); } }
-
now run
dart run build_runner build
in console which will generatego_responsive.g.dart
-
then import
go_responsive.dart
can be usecontext.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, ), ), ); } }
-
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), ), ); } }
-
or use
context.is{breakpoint_name}
with if elseclass 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), ); } }
-
or use
context.goResponsiveData
andGoResponsiveBreakpoints.{breakpoint_name}
combination for custom conditionsclass 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), ); } }
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