Just My Life & My Work

[Flutter] SafeArea Widget

現在智慧手機裝置有各種型號(iOS 和 Android),總有些時候,靠邊(上、下、左、右)的地方會被遮擋,那麼我們怎麼排除此問題呢?🤔

此時可以使用 SafeArea Widget

我以 iPhone 11 為例,可以看到截圖上的字被狀態列給蓋住。

此為原本呈現的程式碼:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Happy Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(
        color: Colors.green,
        child: Text(
            'HappyMan Studio :)\nHappyMan Studio :)\nHappyMan Studio :)\n'),
      ),
    );
  }
}

已加入 SafeArea 的程式碼:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Happy Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Container(
        color: Colors.green,
        child: SafeArea(
          child: Text(
              'HappyMan Studio :)\nHappyMan Studio :)\nHappyMan Studio :)\n'),
        )
      ),
    );
  }
}

很簡單地,把 Text 包裹在 SafeArea 之中。🙃

效果如截圖:

可參考:

SafeArea class

SafeArea (Flutter Widget of the Week)

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚: