Flutter 每週尤物－第一週：Safe Area


現在的行動裝置，螢幕的設計逐漸多樣化：瀏海、水滴屏、圓角⋯⋯等等。
若要設計一個全螢幕查詢資料的畫面，在不做其他措施的情況下，想必會在一些設備中呈現出不如預期的畫面。
 
以這個畫面為例，在新型的 iPhone 中，字被底下的圓角和操作桿擋住了，觀感不佳。如果沒有 AppBar 的話，資料被「特殊設計的螢幕」擋住的部分會更多。

這時可能會直覺地想到，給整個畫面加個 Padding 不就好了嗎？ 

  這樣看起來是好一點了。
 
但反而是在一些螢幕中規中矩的設備上出問題了⋯⋯

只要懂得用 Safe Area 這個 Widget 來包裝畫面的話：


這樣無論是在哪種設備上，都能把畫面排成適合的樣子了。

此外也可以調整其他屬性，決定作用的範圍。

程式碼範例：
官方文章

留言

張貼留言

這個網誌中的熱門文章

Flutter 動態配置多環境 - iOS Scheme 配置

圖片
iOS app 同樣也有區分 app 名稱和套件名稱的需求，但現在嘗試帶 --flavor 參數建置 iOS 版 app 的時候，會得到以下訊息： 字面上的意思是沒有設定自訂 Scheme，稍後要移至 Xcode 進行建立 Scheme 的程序。 建立自訂 Scheme 在 VS Code 對著 ios 資料夾按右鍵，在選單中點擊 Open in Xcode。 在 Android Studio 是在選單中點擊 Flutter -> Open iOS module in Xcode。   出現 Xcode 後，點擊目標選擇器，在出現的選單中點擊 New Scheme…   Target 要選擇 Runner，Name 要輸入與 EnvName 相符的數值，本例為「dev」。並以相同方式建立 beta 的 Scheme。 接著點擊 Manage Schemes… 對著預設的 Runner 按下 Return(Enter) 鍵，重新命名為「prod」。完成每個 Scheme 的建立。   再次嘗試建置 Flutter app ，仍然出現錯誤訊息。 大意是要在 Debug 模式執行 prod 組態，預期會有名為 Debug-prod 的建置設定，但是現在沒有。 建立 Xcode 建置設定 點擊專案檔 -> PROJECT 下的 Runner -> Info 標籤。 在 Configurations 建立所需的設定 Flutter iOS 模組預設存在這 3 種設定： Debug Release Profile 這是對應 Flutter 支援的建置模式，稍後會以這些設定，延伸出本範例需要的設定檔。 更詳細的說明，可見〈 Flutter 的构建模式选择 〉。 按下＋按鈕，點擊 Duplicate "Debug" Configuration 選項。在複製出來的項目中，重新命名為「Debug-dev」。其中 Debug 是 Flutter 支援的建置模式之一，dev 是本範例自訂的組態。 以同樣的方式建立「Release-dev」、「Profile-dev」，成果如附圖。   以同樣的方式處理 beta 組態，成果如附圖。   最後將預設的設定名稱，重新命名為 prod 適用的...
閱讀完整內容

Flutter 動態配置多環境 - Flutter 程式配置

圖片
Flutter 執行環境切換機制，滿足產品開發過程中，需要將開發／測試／正式環境分開的需求。 在原生程式（Kotlin、Swift），Android 和 iOS 能分別用 Gradle 和 TARGETS 條件編譯滿足這個需求 ； 在 Flutter 也可以利用 --dart-define 和 -flavor 參數，挑選要執行的產品版本。    此系列文章將逐步解說，如何為 Flutter 專案建置多環境切換機制。  
閱讀完整內容