flutter - 如何删除容器中多余的红色空间？

我在Scaffold窗口小部件中使用bottomNavigationBar窗口小部件，但是我有额外的红色Container覆盖了Scaffold的某些区域，如附件中所示。如何清除Container的红色区域？我尝试使用Colors.transparent，但无法正常工作!
在codepen中尝试一下:
Click Here
附件 :

完整代码:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       backgroundColor: Color(0xff2c3e50),
      bottomNavigationBar: InkWell(
          onTap: () {
print('Hi');
          },
          child: Container(
            color:Colors.red,
            width: 80,
            height: 80,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    color: Color(
                      0xFF1D1E33,
                    ),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(25),
                      bottomLeft: Radius.circular(2),
                      topRight: Radius.circular(2),
                    ),
                  ),
                  child: Icon(
                    Icons.add,
                    color: Colors.white,
                  ),
                )
              ],
            ),
          ),
        ),
      body: Center(
        child: Text(
          'heello ? ',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
    );
  }
}

最佳答案

您必须删除:

color:Colors.red,

在第21行中
或将此行替换为:

color:Colors.transparent,

像这样:
https://codepen.io/Fudal/pen/YzqyVGE