flutter support negative margin

需求

要求两个布局的widget有重叠的部分。

flutter-support-negative-margin

思路

刚开始想，通过设置margin为负值，就可以解决（这是android 布局思维）。但是很遗憾，flutter中的padding及margin都不能设置负值(negative)。

通过查阅资料，得知通过设置 transform 属性可以达到效果。在此记录下，方便以后查询。

实现代码

关键代码

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: Size.infinite.width,
            height: 200,
            child: const Align(
                child: Text(
              "This is top widget",
              style: TextStyle(fontSize: 20, color: Colors.white),
            )),
          ),
          Container(
            color: Colors.red,
            height: 200,
            width: 200,
            transform: Matrix4.translationValues(0,-20,0),
          )
        ],
      ),
    );
  }
}

参考

https://stackoverflow.com/questions/48086486/does-flutter-support-negative-margin