go_responsive_annotation 0.1.0

A package exposing annotations for go_responsive_generator.

GoResponsive

A simple, easy but expressive responsive framework.

Features

GoResponsive makes responsive design easy by:

• Generating .is{breakpoint_name} extension methods on BuildContext so can be used as condition
• Generate GoResponsiveWidget with all defined breakpoint as optional parameters wit and a required defaultWidget paramter default behaviour if none brekpoint match size.
• 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: 'small'),
    GoResponsiveBreakpoint(size: 840, name: 'medium'),
    GoResponsiveBreakpoint(size: double.maxFinite, name: 'large'),
  ];
  

• 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 main.g.dart

  class GoResponsiveWidget extends StatelessWidget {
    const GoResponsiveWidget({
      super.key,
      required this.defaultWidget,
      this.small,
      this.medium,
      this.large,
    });
  
    final Widget defaultWidget;
  
    final Widget? small;
  
    final Widget? medium;
  
    final Widget? large;
  
    @override
    Widget build(BuildContext context) {
      return context.goResponsiveValue(
        small: small,
        medium: medium,
        large: large,
        defaultValue: defaultWidget,
      );
    }
  }
  
  extension GoResponsiveBuildContextExtensions on BuildContext {
    GoResponsiveData get goResponsiveData => GoResponsiveBuilder.of(this);
    bool get isSmall => goResponsiveData.smallerOrEqualTo('small');
    bool get isMedium => goResponsiveData.between('small', 'medium');
    bool get isLarge => goResponsiveData.between('medium', 'large');
    T goResponsiveValue<T>({
      required T defaultValue,
      T? small,
      T? medium,
      T? large,
    }) {
      if (isSmall) {
        if (small != null) return small;
      }
  
      if (isMedium) {
        if (medium != null) return medium;
      }
  
      if (isLarge) {
        if (large != null) return large;
      }
  
      return defaultValue;
    }
  }
  

• then import main.g.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: GoResponsiveWidget(
          small: Container(
            color: Colors.red,
          ),
          medium: Container(
            color: Colors.green,
          ),
          large: Container(
            color: Colors.blue,
          ),
          defaultWidget: Container(
            color: Colors.black,
          ),
        ),
      );
    }
  }
  

Please see example for complete understanding.

My other packages

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

Contributors