argo 0.0.3

Widgets and tools for make it easy to create responsive apps. Widget to handle visibility, orientation, handle diferent layout depend of screen and can handle a responsive theme.

example/example.md

Basic Use

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Argo Example App',
      debugShowCheckedModeBanner: false,
      home: ResponsiveWrapper(
        wrapConfig: WrapperConfig(
          globalBreakpoints: ScreenBreakpoints(
            mobile: 321,
            tablet: 650,
            desktop: 1100,
          ),
        ),
        child: MainScreen(),
      ),
    );
  }
}

// ResponsiveLayoutBuilder
ResponsiveLayoutWidget.builder(
  mobile: (ctx, info) => MobileChild(),
  tablet: (ctx, info) => TabletChild(),
  desktop:(ctx, info) => DesktopChild(),
)

// ResponsiveVisibility
ResponsiveVisibility.screen(
  conditionScreen: ConditionScreen(
    mobile: true,
    tablet: true,
    desktop: false,
  ),
  child: Container(
    color: Colors.red,
    width: 50,
    height: 50
  ),
),

// ResponsiveBuilder
ResponsiveBuilder(
  builder: (ctx, info) { 
    if(info.localSize.width > 300 && info.deviceScreen.isTablet()){
      return Container(
                color: Colors.red,
                width: 50,
                height: 50
              );
    }else{
      return const SizedBox();
    }
  }
)


// ResponsiveTheme
ResponsiveTheme.screen(
   conditionScreen: ConditionScreen(
     mobile: MyThemesApp(),
     tablet: MyThemesTablet(),
     desktop: MyThemesWeb(),
   ),
 )

One example IThemeDataRule usign of the Condition for ResponsiveTheme

class MyThemesApp with IThemeDataRule {
  @override
  ThemeData getThemeByRule({ThemeRule rule = ThemeRule.light}) {
    switch (rule) {
      case ThemeRule.light:
        return lightTheme;
      case ThemeRule.dark:
        return darkTheme;
      case ThemeRule.custom:
        return darkerTheme;
      default:
        return lightTheme;
    }
  }
}