Web响应式实用工具

一个Flutter包，可以帮助您在响应式Web应用开发中更直观、更高效地进行开发。

该软件包包含两个响应式小部件和一个实用类，供您随意使用。

  • 响应式小部件
    • WebResponsiveScaffold
    • WebResponsiveLayout
  • 实用类
    • ResponsiveScreen

在Patreon上支持我 Patreon

代码片段

响应式小部件：WebResponsiveScaffold

使您能够完全替换Scaffold小部件

您可以为每个屏幕尺寸传递参数（

参数，例如：AppBar，Drawer，Scaffold Body和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 */,
       ),
   );
 }
}

响应式小部件：WebResponsiveLayout

使您能够为每个屏幕尺寸拥有不同的小部件

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

响应式工具：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*/}

GitHub

查看 Github