GoResponsive MIT

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.
  • 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 pub pakage
go_responsive_annotation pub pakage
go_responsive_generator pub pakage
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 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,
            );
          },
        );
      }
    }
    
  • 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,
            ),
          ),
        );
      }
    }
    
  • 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 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),
        );
      }
    }
    
  • 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),
        );
      }
    }
    

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

Contributors