Flutter隐藏/移除AppBar后顶部布局异常的解决求助

各位大佬好，我最近开发Flutter应用时碰到个头疼的问题：我想把页面的AppBar隐藏或者直接移除，但试了两种方式——要么删掉AppBar相关代码，要么把appBar设为null——结果页面顶部的Widget直接贴到了屏幕最顶端，和状态栏挤在一起，布局看起来特别怪异，完全不符合预期。

我翻了好多技术文章都没找到解决思路，实在没办法了，来这儿求助大家！

先给大家看看两种状态的截图：

• 有AppBar时的正常布局：
  

• 移除AppBar后顶部布局异常的样子：
  

下面是我main.dart里的代码，麻烦大家帮忙找找问题出在哪，或者给个可行的解决办法：

import 'package:flutter/material.dart';

import 'package:flutter_complete_guide/widgets/balance.dart';

import 'package:flutter_complete_guide/widgets/chart.dart';

import './widgets/new_transaction.dart';

import './widgets/transaction_list.dart';

import './models/transaction.dart';

import './widgets/balance.dart';

import 'widgets/outcome.dart';

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

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

title: 'My Expenses',

theme: ThemeData(

primarySwatch: Colors.purple,

fontFamily: 'Quicksand',

textTheme: ThemeData.light().textTheme.copyWith(),

appBarTheme: AppBarTheme(

titleTextStyle: TextStyle(

fontFamily: 'OpenSans',

fontSize: 20,

fontWeight: FontWeight.bold),

),

),

home: MyHomePage(),

);

}

}

class MyHomePage extends StatefulWidget {

// String titleInput;

// String amountInput;

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

final List<Transaction> _userTransactions = [

// Transaction(

//   id: 't1',

//   title: 'New Shoes',

//   amount: 69.99,

//   date: DateTime.now(),

// ),

// Transaction(

//   id: 't2',

//   title: 'Weekly Groceries',

//   amount: 16.53,

//   date: DateTime.now(),

// ),

];

List<Transaction> get _recentTransactions {

return _userTransactions.where((tx) {

return tx.date.isAfter(

DateTime.now().subtract(

Duration(days: 7),

),

);

}).toList();

}

void _addNewTransaction(

String txTitle, double txAmount, DateTime chosenDate) {

final newTx = Transaction(

title: txTitle,

amount: txAmount,

date: chosenDate,

id: DateTime.now().toString(),

);

setState(() {

_userTransactions.add(newTx);

});

}

void startAddNewTransaction(BuildContext ctx) {

showModalBottomSheet(

context: ctx,

builder: (_) {

return GestureDetector(

onTap: () {},

child: NewTransaction(_addNewTransaction),

behavior: HitTestBehavior.opaque,

);

},

);

}

void _deleteTransaction(String id) {

setState(() {

_userTransactions.removeWhere((tx) {

return tx.id == id;

});

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

body: SingleChildScrollView(

child: Column(

// mainAxisAlignment: MainAxisAlignment.start,

crossAxisAlignment: CrossAxisAlignment.stretch,

children: <Widget>[

Chart(_recentTransactions),

TransactionList(_userTransactions, _deleteTransaction),

Card(

elevation: 10,

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(15.0)),

child: Directionality(

textDirection: TextDirection.rtl,

child: TextButton.icon(

onPressed: () => startAddNewTransaction(context),

icon: Icon(Icons.add_task_outlined),

label: Text(

'Add expenses',

),

),

),

),

TotalBalance(),

TotalOutcome()

],

),

),

);

}

}

我的需求很简单：就是想把AppBar完全去掉，继续做后续的界面设计和功能开发，但要让顶部布局恢复正常，不要和状态栏挤在一起。麻烦大家帮忙支支招！

备注：内容来源于stack exchange，提问作者Danny Den