Flutter媒体查询预览插件media_query

Flutter媒体查询预览插件media_query_preview的使用

您是否曾经遇到过UI在字体大小太大或设备屏幕尺寸太小时崩溃的情况？检查这些问题可能会很麻烦。

此插件允许您预览您的实现界面在不同设备上的显示效果，这些设备具有不同的屏幕尺寸、文本缩放比例和亮度。

该插件受到了 device_preview 的启发。

特性

该插件提供了以下功能：

预览您的界面在不同设备上的显示效果，包括不同的屏幕尺寸、文本缩放比例和亮度。
除了预定义的设备（如 PreviewDevice.iPhone5_5inch 和 PreviewDevice.android6_7inch），您还可以创建自定义的 PreviewDevice 实例。
预览键盘显示时的界面。
单独操作每个预览。
与 riverpod 兼容。

演示

查看演示：https://kingu-dev.github.io/media_query_preview

使用方法

如果您正在使用 riverpod，您可以执行以下操作：

// 初始化 Provider
final container = ProviderContainer();

final previewDevices = [
  [
    PreviewDevice.iPhone5_5inch(
      textScaleFactor: 0.5,
    ),
    PreviewDevice.iPhone5_5inch(),
    PreviewDevice.iPhone5_5inch(
      brightness: Brightness.dark,
    ),
    PreviewDevice.iPhone5_5inch(
      textScaleFactor: 1.5,
    ),
  ],
  [
    PreviewDevice.iPhone6_7inch(
      textScaleFactor: 0.5,
    ),
    PreviewDevice.iPhone6_7inch(),
    PreviewDevice.iPhone6_7inch(
      brightness: Brightness.dark,
    ),
    PreviewDevice.iPhone6_7inch(
      textScaleFactor: 1.5,
    ),
  ],
  [
    PreviewDevice.android6_7inch(
      textScaleFactor: 0.5,
    ),
    PreviewDevice.android6_7inch(),
    PreviewDevice.android6_7inch(
      brightness: Brightness.dark,
    ),
    PreviewDevice.android6_7inch(
      textScaleFactor: 1.5,
    ),
  ]
];

runApp(
  MediaQueryPreview(
    previewDevices: previewDevices,
    builder: (_, previewDevice) {
      // 如果您想根据targetPlatform更改主题，
      // 您可以从[predictDevice.targetPlatform]获取targetPlatform。
      return UncontrolledProviderScope(
        container: container,
        child: const MyApp(),
      );
    },
  ),
);

如果您不使用 riverpod，则更加简单：

runApp(
  MediaQueryPreview(
    previewDevices: previewDevices,
    builder: (_, previewDevice) {
      // 如果您想根据targetPlatform更改主题，
      // 您可以从[predictDevice.targetPlatform]获取targetPlatform。
      return const MyApp();
    },
  ),
);

更多关于Flutter媒体查询预览插件media_query_preview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼•3 天前

更多关于Flutter媒体查询预览插件media_query_preview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用media_query_preview插件的代码示例。media_query_preview插件允许你在Flutter应用中实时预览不同屏幕尺寸和方向下的布局效果。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加media_query_preview依赖：

dependencies:
  flutter:
    sdk: flutter
  media_query_preview: ^0.5.0  # 请检查最新版本号

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

2. 使用插件

接下来，在你的Flutter应用中导入media_query_preview并使用它。这里有一个简单的示例，展示如何在一个页面中集成MediaQueryPreview。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MediaQueryPreview Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MediaQueryPreviewScreen(
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MediaQueryPreview Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, Flutter!',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('Press Me'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 自定义MediaQueryPreview

你还可以自定义MediaQueryPreview的显示选项，比如设备列表和默认显示的设备。以下是一个更复杂的示例，展示如何自定义这些选项：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MediaQueryPreview Custom Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MediaQueryPreviewScreen(
        // 自定义设备列表
        devices: [
          Device.iPhone12ProMax,
          Device.iPadPro129,
          Device.nexus5,
          // 自定义设备
          Device(
            name: 'Custom Device',
            screenSize: Size(400, 800),
            pixelRatio: 2.0,
            orientation: Orientation.portrait,
          ),
        ],
        // 默认设备
        defaultDevice: Device.nexus5,
        // 工具栏选项
        toolbarOptions: MediaQueryPreviewToolbarOptions(
          showOrientationToggle: true,
          showDeviceSelector: true,
        ),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MediaQueryPreview Custom Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, Custom Flutter Layout!',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('Press Me'),
            ),
          ],
        ),
      ),
    );
  }
}