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.

[Preview]

Features #

GoResponsive makes responsive design easy by:

• Generate GoResponsiveWidget with all defined breakpoint as optional parameters with and a required defaultWidget parameter.
• Generating .is{breakpoint_name} extension methods on BuildContext so can be used with condition.
• Generate goResponsiveValue<T> extension method on BuildContext so can be used set dynamic value.

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 breakepoints as top level list of GoResponsiveBreakpoint and annotate it with @GoResponsive():

  @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 defined breakpoints list:

  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 generate <file_name>.name.go_responsive.dart

• then import <file_name>.name.go_responsive.dart in which GoResponsiveWidget is Defined and can be used like this:

  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,
          ),
        ),
      );
    }
  }
  

My other packages #

Time Picker Wheel Time Picker inspired by Oppo Clock app set alram time screen with full customization

Contributors #