web_responsive_utils 0.0.1 web_responsive_utils: ^0.0.1 copied to clipboard
A flutter package to help you develop for the web more intuitively and efficiently when it comes to responsive webapps.
Web Responsive Utilities #
A flutter package to help you develop for the web more intuitively and efficiently when it comes to responsive webapps.
This package have two responsive widgets
and one utility class
that you can use to your liking.
- Responsive Widgets:
WebResponsiveScaffold
WebResponsiveLayout
- Utility Class
ResponsiveScreen
Code Snippets #
Responsive Widgets: WebResponsiveScaffold
#
Gives you the possibility of replacing your Scaffold widgets entirely
And you can pass in parameters for each screen size (
parameters such as : AppBar, Drawer, Scaffold Body and a Floating Action Button
)
import 'package:flutter/material.dart'; import 'package:testing_web/web_responsive_utils.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: WebResponsiveScaffold( smallLayoutAppBar: /* Your Custom Widget */, smallLayoutDrawer: /* Your Custom Widget */, smallLayoutFAB: /* Your Custom Widget */, smallLayoutWidget: /* Your Custom Widget */, mediumLayoutAppBar: /* Your Custom Widget */, mediumLayoutDrawer: /* Your Custom Widget */, mediumLayoutFAB: /* Your Custom Widget */, mediumLayoutWidget: /* Your Custom Widget */, xLargeLayoutAppBar: /* Your Custom Widget */, xLargeLayoutDrawer: /* Your Custom Widget */, xLargeLayoutFAB: /* Your Custom Widget */, xLargeLayoutWidget: /* Your Custom Widget */, ), ); } }
Responsive Widgets: WebResponsiveLayout
#
Gives you the possibility of having a different widget for each screen size
import 'package:flutter/material.dart'; import 'package:testing_web/web_responsive_utils.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: WebResponsiveLayout( smallLayoutWidget: /* Your Custom Widget */, mediumLayoutWidget: /* Your Custom Widget */, xLargeLayoutWidget: /* Your Custom Widget */, ), ), ); } }
Responsive Utility: ResponsiveScreen
#
if (ResponsiveScreen.isSmall(context)) {/*Your code here*/} if (ResponsiveScreen.isXSmall(context)) {/*Your code here*/} if (ResponsiveScreen.isMedium(context)) {/*Your code here*/} if (ResponsiveScreen.isXLarge(context)) {/*Your code here*/}