如何在各种屏幕尺寸上测试Flutter应用程序？教程

Question

这是我发现的针对不同屏幕尺寸测试 Flutter 移动应用程序的最佳方法的指南。如果您有其他喜欢的方式或对此过程有任何优化，请随时为未来的搜索者留下您的想法。只要把这个方法放在一起，我相信还有很多可以改进的地方。

我最初尝试了 device_preview 包，但它与我的应用程序设置不能很好地集成，所以我继续使用它。

策略很简单 - 为 MacOS 构建应用程序并使用

Shortcuts

脚本根据下拉菜单设备选择将窗口大小调整为正确的大小。

Answer 1

设置：

1. 打开快捷方式并创建一个新的快捷方式
2. 添加

   Run AppleScript

   块
3. 粘贴以下脚本（我是 AppleScript 新手，所以组合起来很麻烦，我确信可以进一步改进）

-- MANUALLY get your screen size from "About this mac"
set diagonalSizeInInches to 13

-- Phone sizes in width (in), height (in)
set iPhoneSizes to {¬
    {"iPhone 15 Pro Max", 3.03, 6.33}, ¬
    {"iPhone 15 Pro", 2.81, 5.81}, ¬
    {"iPhone 15 Plus", 3.05, 6.33}, ¬
    {"iPhone 15", 2.82, 5.78}, ¬
    {"iPhone 14 Pro Max", 3.05, 6.33}, ¬
    {"iPhone 14 Pro", 2.81, 5.81}, ¬
    {"iPhone 14 Plus", 3.05, 6.33}, ¬
    {"iPhone 14", 2.82, 5.78}, ¬
    {"iPhone 13 Pro Max", 3.05, 6.33}, ¬
    {"iPhone 13 Pro", 2.82, 5.78}, ¬
    {"iPhone 13", 2.82, 5.78}, ¬
    {"iPhone 13 mini", 2.53, 5.18}, ¬
    {"iPhone 12 Pro Max", 3.07, 6.33}, ¬
    {"iPhone 12 Pro", 2.82, 5.78}, ¬
    {"iPhone 12", 2.82, 5.78}, ¬
    {"iPhone 12 mini", 2.53, 5.18}, ¬
    {"iPhone 11 Pro Max", 3.06, 6.22}, ¬
    {"iPhone 11 Pro", 2.81, 5.67}, ¬
    {"iPhone 11", 3.05, 6.06}, ¬
    {"iPhone XS Max", 3.05, 6.2}, ¬
    {"iPhone XS", 2.79, 5.65}, ¬
    {"iPhone XR", 3.06, 6.06}, ¬
    {"iPhone X", 2.79, 5.65}, ¬
    {"iPhone 8 Plus", 3.07, 6.24}, ¬
    {"iPhone 8", 2.65, 5.45}}

-- Get your laptop screen display (in pixels)
tell application "Finder"
    set screenBounds to bounds of window of desktop
end tell
set displayW to item 3 of screenBounds
set displayH to item 4 of screenBounds

-- Compute your screen display PPI
set equation to (displayW as string) & "^2 + " & (displayH as string) & "^2"
set diagonalResolution to do shell script "echo 'sqrt(" & equation & ")' | bc -l"
set displayPPI to diagonalResolution / diagonalSizeInInches


-- Prompt the user to select the test device
set modelNames to {}
repeat with thisModel in iPhoneSizes
    set end of modelNames to item 1 of thisModel
end repeat

set selectedModel to (choose from list modelNames with prompt "Select an iPhone model:" default items {""})
if selectedModel is false then
    display dialog "No model selected. Exiting script."
    return
end if


-- Use the selected device to set your window size
set screenW to 0
set screenH to 0
set selectedModelName to item 1 of selectedModel

repeat with thisModel in iPhoneSizes
    if item 1 of thisModel is equal to selectedModelName then
        set screenW to (item 2 of thisModel) * displayPPI
        set screenH to (item 3 of thisModel) * displayPPI
        exit repeat
    end if
end repeat

tell application "System Events"
    tell (first process whose frontmost is true)
        if (count windows) > 0 then
            set win to front window
            set size of win to {screenW, screenH}
            set winSize to size of win
            set newPosition to {(displayW - (item 1 of winSize)) / 2, 2}
            set position of win to newPosition
        else
            display dialog "No windows found in the frontmost application."
        end if
    end tell
end tell

4. 在脚本顶部手动设置笔记本电脑屏幕尺寸
5. 按右上角的

   (i)

   按钮，然后在

   Details

   下切换

   Use as Quick Action

   >

   Finder

   。请随意在此处添加键盘快捷键（我喜欢

   CMD+SHFT+0

   ）

这样，你就准备好了。您需要做的就是运行

flutter run -d macos

在 MacOS 上启动该应用程序，一旦应用程序构建，请使用键盘快捷键（如果您创建了一个）或从顶部工具栏中选择该快捷键。