在不设置appbar的情况下修改系统导航栏背景色的方法

思路:

获取系统状态栏的高度,然后在顶部创建一个和系统状态栏高度一致的widget,并设置其背景为自己想要的颜色。

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'HomeFragmentPage.dart';
import 'dart:ui';

class HomePage extends StatefulWidget {
  @override
  State createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State {
  var appBarTitles = ['首页', '发现', '我的'];

  var _currentPageIndex = 0;
  var _pageController = new PageController(initialPage: 0);

  _onTap(int i) {
    Fluttertoast.showToast(msg: "点击了第$i个");
    _pageController.animateToPage(i,
        duration: Duration(milliseconds: 300), curve: Curves.ease);
  }

  _pageChange(int index) {
    setState(() {
      if (_currentPageIndex != index) _currentPageIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar:null,
      body: new Column(
        children: [
         //创建一个和系统状态栏高度一致的组件
          new Container(height:MediaQueryData.fromWindow(window).padding.top,
          color: Colors.yellow,),
          new Expanded(
            child: new PageView.builder(
              controller: _pageController,
              onPageChanged: _pageChange,
              itemBuilder: (BuildContext context, int index) {
                switch (index) {
                  case 0:
//              return new Text("这是首页");
                    return HomeFragmentPage();
                  case 1:
                    return new Text("这是第二页");
                  case 2:
                    return new Text("这是第三页");
                }
              },
              itemCount: 3,
            ),
          )
        ],
      ),
      //底部导航栏
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: new Icon(Icons.home), title: Text(appBarTitles[0])),
          BottomNavigationBarItem(
              icon: new Icon(Icons.security), title: Text(appBarTitles[1])),
          BottomNavigationBarItem(
              icon: new Icon(Icons.recent_actors), title: Text(appBarTitles[2]))
        ],
        onTap: _onTap,
        currentIndex: _currentPageIndex,
      ),
    );
  }
}
图示

你可能感兴趣的:(在不设置appbar的情况下修改系统导航栏背景色的方法)