4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutter #3Advent Calendar 2020

Day 21

FlutterでSafeAreaじゃないとこの高さを取得して色々使う

Posted at
safe_area_util.dart
class SafeAreaUtil {
  factory SafeAreaUtil() => _cache;
  SafeAreaUtil._internal();
  static final SafeAreaUtil _cache = SafeAreaUtil._internal();

  static double unSafeAreaBottomHeight;
  bool get hasUnSafeAreaBottomHeight => unSafeAreaBottomHeight != 0.0;
}

シングルトン的な何かを作る。

app.dart
class App extends StatelessWidget {
  const App();

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'title',
        home: Home(),
        builder: _builder,
        ...(themeとか色々),
      );

  Widget _builder(BuildContext context, Widget child) {
    SafeAreaUtil.unSafeAreaBottomHeight = MediaQuery.of(context).padding.bottom;
    return child;
  }
}

アプリ起動時に計算して挿入。
(shared preferenceに入れても良さそうだけど、OSのアップデートとかでSafe Areaの仕組み変わるとかあると怖い。)

simple_footer.dart
class SimpleFooter extends StatelessWidget {
  const SimpleFooter({@required this.child});

  final Widget child;

  @override
  Widget build(BuildContext context) => Container(
        color: Theme.of(context).footerColor,
        height: _height(context),
        child: _column(context),
      );

  double _height(BuildContext context) => simpleFooterHeight(
        hasSafeAreaHeight: _hasSafeArea,
      );

  double simpleFooterHeight({@required bool hasSafeAreaHeight}) =>
    hasSafeAreaHeight ? 83 : 72;

  bool get _hasSafeArea =>
      SafeAreaUtil().hasUnSafeAreaBottomHeight;

  Column _column(BuildContext context) => Column(
        children: <Widget>[
          _divider(context),
          _padding,
          if (_hasSafeArea) const SizedBox(height: 11),
        ],
      );

  Divider _divider(BuildContext context) => Divider(
        height: 0.5,
        color: Theme.of(context).borderColor,
      );

  Padding get _padding => Padding(
        padding:
            const EdgeInsets.only(left: 12, top: 11.5, right: 12, bottom: 12),
        child: child,
      );
}

こんな感じで呼び出します。

基本はSafeArea Widgetを使うのが正解だと思いますが、
小回り利かせたい時には参考にして頂けると👍

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?