flutter入門之兼容Android和IOS的狀態欄

    flutter最大的優勢是跨平臺，Android和IOS可以共用同一套代碼，不過我們在開發的過程中，還是有些地方需要單獨定製的，比如說應用圖標，比如說應用啓動圖（splash），還有就是插件開發，今天我們要講的是IOS和Android的狀態欄適配。

    flutter默認是忽略狀態欄的高度的，也就是說，我們寫一個app，如果不對狀態欄做處理，那麼我們的應用是這樣的：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Text(
        'hello',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40,
          color: Colors.black,
        ),
      ),
      color: Colors.white,
    );
  }
}

    可以看到，這樣的界面嚴重影響用戶體驗。

    因此，爲了給用戶最佳的體驗，那麼我們必須先計算出狀態欄的高度，然後再將內容佈局到狀態欄以下。

    對於IOS和Android兩個不同的平臺，計算狀態欄的高度已經被flutter封裝好了，我們只用調用即可。

    EdgeInsets padding = MediaQuery.of(context).padding;
    double top = math.max(padding.top , EdgeInsets.zero.top);

    雖然以上的方法可以避免將內容佈局到狀態欄，但是某些時候，尤其是兼容IOS和Android兩個平臺的時候，狀態欄默認的背景顏色跟狀態欄字體顏色衝突，導致我們無法查看狀態欄信息，比如以下場景：

    爲了解決以上問題，我們可以將佈局分解成兩部分，首先求取狀態欄的高度，將狀態欄填充不會衝突的背景顏色，然後將我們的佈局放到狀態欄以下。

    有了以上的思路，那麼代碼就很簡單了，以下是我封裝的一個兼容IOS和Android狀態欄的庫：

import 'package:flutter/material.dart';
import 'dart:math' as math;

class TopAreaWidget extends StatelessWidget{
  final Widget child; //佈局
  final Color color; //背景顏色

  TopAreaWidget({@required this.child, this.color=Colors.blueGrey});

  @override
  Widget build(BuildContext context) {
    EdgeInsets padding = MediaQuery.of(context).padding;
    double top = math.max(padding.top , EdgeInsets.zero.top); //計算狀態欄的高度

    return Flex(
      direction: Axis.vertical,
      children: <Widget>[
        Container(
          width: double.infinity,
          height: top,
          color: color,
        ),
        Expanded(child: child),
      ],
    );
  }

}

    使用方法：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TopAreaWidget(
      child: Container(
        child: Text("加載中..."),
      ),
      color:Colors.cyan,);
  }
}

    效果如下：