Flutter屏幕适配插件responsive_screen

安装

在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  responsive_screen_builder:

然后运行 flutter pub get 来安装该包。

特性

提供屏幕方向信息。
提供可能的屏幕类型（移动设备、平板电脑和桌面）。
提供当前屏幕上应用程序正在显示的总屏幕大小。
提供当前小部件正在绘制的边界。

使用

首先，在您的项目中导入 responsive_screen_builder 包：

import 'package:responsive_screen_builder/responsive_screen_builder.dart';

接下来，您可以使用 ResponsiveScreenBuilder 构建响应式屏幕。以下是一个简单的示例：

ResponsiveScreenBuilder(builder: (context, screenInformation) {
  // 屏幕信息
  // screenInformation.deviceType; // 设备类型
  // screenInformation.screenSize; // 屏幕大小
  // screenInformation.localWidgetSize; // 当前小部件的局部大小
  // screenInformation.orientation; // 屏幕方向

  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.all(20.0),
      child: Center(
        child: Text(screenInformation.toString()), // 打印屏幕信息
      ),
    ),
  );
})

在这个示例中，screenInformation 包含了有关屏幕的各种信息，例如设备类型、屏幕大小、局部小部件大小和屏幕方向。

示例代码

以下是一个完整的示例代码，展示了如何使用 responsive_screen_builder 插件来构建响应式屏幕：

import 'package:flutter/material.dart';
import 'package:responsive_screen_builder/responsive_screen_builder.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ResponsiveScreenBuilder(builder: (context, screenInformation) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('设备类型: ${screenInformation.deviceType}'),
                Text('屏幕大小: ${screenInformation.screenSize}'),
                Text('局部小部件大小: ${screenInformation.localWidgetSize}'),
                Text('屏幕方向: ${screenInformation.orientation}'),
              ],
            ),
          ),
        ),
      );
    });
  }
}

更多关于Flutter屏幕适配插件responsive_screen_builder的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼

更多关于Flutter屏幕适配插件responsive_screen_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

responsive_screen_builder 是一个用于 Flutter 的屏幕适配插件，它可以帮助开发者根据不同的屏幕尺寸和方向，动态调整 UI 布局。这个插件的主要目的是简化响应式 UI 的开发过程，使得应用在不同设备上都能有良好的显示效果。

安装

首先，你需要在 pubspec.yaml 文件中添加 responsive_screen_builder 插件的依赖：

dependencies:
  responsive_screen_builder: ^1.0.0

然后运行 flutter pub get 来安装依赖。

基本用法

responsive_screen_builder 提供了一个 ResponsiveScreenBuilder 组件，你可以将它包裹在你的应用的根组件上，或者包裹在需要响应式布局的特定部分。

1. 包裹在根组件上

import 'package:flutter/material.dart';
import 'package:responsive_screen_builder/responsive_screen_builder.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveScreenBuilder(
        builder: (BuildContext context, ScreenSizeData sizeData) {
          return Scaffold(
            appBar: AppBar(
              title: Text('Responsive App'),
            ),
            body: Center(
              child: Text('Screen Width: ${sizeData.screenWidth}'),
            ),
          );
        },
      ),
    );
  }
}

2. 包裹在特定部分

import 'package:flutter/material.dart';
import 'package:responsive_screen_builder/responsive_screen_builder.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Responsive App'),
        ),
        body: ResponsiveScreenBuilder(
          builder: (BuildContext context, ScreenSizeData sizeData) {
            return Center(
              child: Text('Screen Width: ${sizeData.screenWidth}'),
            );
          },
        ),
      ),
    );
  }
}

`ScreenSizeData` 属性

ScreenSizeData 提供了以下属性，可以帮助你根据屏幕尺寸和方向来调整布局：

screenWidth: 屏幕的宽度。
screenHeight: 屏幕的高度。
orientation: 屏幕的方向（Orientation.portrait 或 Orientation.landscape）。
deviceType: 设备类型（DeviceType.mobile、DeviceType.tablet、DeviceType.desktop 等）。

示例：根据屏幕宽度调整布局

import 'package:flutter/material.dart';
import 'package:responsive_screen_builder/responsive_screen_builder.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Responsive App'),
        ),
        body: ResponsiveScreenBuilder(
          builder: (BuildContext context, ScreenSizeData sizeData) {
            if (sizeData.screenWidth > 600) {
              return Center(
                child: Text('This is a tablet or desktop layout'),
              );
            } else {
              return Center(
                child: Text('This is a mobile layout'),
              );
            }
          },
        ),
      ),
    );
  }
}

示例：根据设备类型调整布局

import 'package:flutter/material.dart';
import 'package:responsive_screen_builder/responsive_screen_builder.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Responsive App'),
        ),
        body: ResponsiveScreenBuilder(
          builder: (BuildContext context, ScreenSizeData sizeData) {
            switch (sizeData.deviceType) {
              case DeviceType.mobile:
                return Center(
                  child: Text('This is a mobile layout'),
                );
              case DeviceType.tablet:
                return Center(
                  child: Text('This is a tablet layout'),
                );
              case DeviceType.desktop:
                return Center(
                  child: Text('This is a desktop layout'),
                );
              default:
                return Center(
                  child: Text('Unknown device type'),
                );
            }
          },
        ),
      ),
    );
  }
}

Flutter屏幕适配插件responsive_screen_builder的使用

安装

特性

使用