Flutter网页响应式工具插件web_responsive_utils的使用

网页响应式工具

web_responsive_utils 是一个用于帮助开发者更直观和高效地开发响应式网页应用的 Flutter 包。该包提供了两种响应式小部件和一种实用类供你选择使用。

响应式小部件

WebResponsiveScaffold

WebResponsiveScaffold 可以完全替代你的 Scaffold 小部件，并允许你在不同屏幕尺寸下传递不同的参数。

• 参数包括：
  • AppBar
  • Drawer
  • Scaffold Body
  • Floating Action Button

WebResponsiveLayout

WebResponsiveLayout 允许你在不同屏幕尺寸下显示不同的小部件。

实用类

ResponsiveScreen

ResponsiveScreen 类提供了一些方法来判断当前屏幕尺寸，从而根据屏幕尺寸执行不同的代码逻辑。

• 方法包括：
  • isSmall(context)
  • isXSmall(context)
  • isMedium(context)
  • isXLarge(context)

代码示例

示例1：使用WebResponsiveScaffold

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](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebResponsiveScaffold(
        smallLayoutAppBar: AppBar(title: Text('Small Layout')),
        smallLayoutDrawer: Drawer(child: Text('Small Layout Drawer')),
        smallLayoutFAB: FloatingActionButton(onPressed: () {}, child: Icon(Icons.add)),
        smallLayoutWidget: Center(child: Text('Small Layout Body')),

        mediumLayoutAppBar: AppBar(title: Text('Medium Layout')),
        mediumLayoutDrawer: Drawer(child: Text('Medium Layout Drawer')),
        mediumLayoutFAB: FloatingActionButton(onPressed: () {}, child: Icon(Icons.add)),
        mediumLayoutWidget: Center(child: Text('Medium Layout Body')),

        xLargeLayoutAppBar: AppBar(title: Text('X Large Layout')),
        xLargeLayoutDrawer: Drawer(child: Text('X Large Layout Drawer')),
        xLargeLayoutFAB: FloatingActionButton(onPressed: () {}, child: Icon(Icons.add)),
        xLargeLayoutWidget: Center(child: Text('X Large Layout Body')),
      ),
    );
  }
}

示例2：使用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](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: WebResponsiveLayout(
          smallLayoutWidget: Center(child: Text('Small Layout')),
          mediumLayoutWidget: Center(child: Text('Medium Layout')),
          xLargeLayoutWidget: Center(child: Text('X Large Layout')),
        ),
      ),
    );
  }
}

示例3：使用ResponsiveScreen

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](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              if (ResponsiveScreen.isSmall(context))
                Text('This is a small screen'),
              if (ResponsiveScreen.isXSmall(context))
                Text('This is an extra small screen'),
              if (ResponsiveScreen.isMedium(context))
                Text('This is a medium screen'),
              if (ResponsiveScreen.isXLarge(context))
                Text('This is an extra large screen'),
            ],
          ),
        ),
      ),
    );
  }
}