Question

我已经创建了一个导航抽屉。但是我不知道如何使用custom_clippers包添加

我想在抽屉的标题部分添加剪切图像。

这是代码

Widget _createHeader() {
    return DrawerHeader(
//        margin: EdgeInsets.zero,
//        padding: EdgeInsets.zero,

        child:ClipPath(
          clipper: SideCutClipper(),
          child: Container(
            height: 600,
            width: 500  ,
            color: Colors.pink))
               ,


//        decoration: BoxDecoration(
//            image: DecorationImage(
//                fit: BoxFit.fill,
//                image:  AssetImage('path/to/header_background.png'))),
        child: Stack(children: <Widget>[
          Positioned(
              bottom: 12.0,
              left: 16.0,
              child: Text("Flutter Step-by-Step",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                      fontWeight: FontWeight.w500))),
        ]));
  }

Answer 1

只需很少编辑括号和括号：

Widget _createHeader() {
return DrawerHeader(
  child: ClipPath(
    clipper: SideCutClipper(),
    child: Container(
      decoration: BoxDecoration(
       image: DecorationImage(
           fit: BoxFit.fill,
           image:  AssetImage('images/Rectangle-image.png'))),
      child: Stack(
        children: <Widget>[
          Positioned(
            bottom: 12.0,
            left: 16.0,
            child: Text(
              "Flutter Step-by-Step",
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                  fontWeight: FontWeight.w500),
            ),
          ),
        ],
      ),
    ),
  ),
);
}

提示

在括号和方括号后使用，（逗号），然后重新格式化代码（VSCode中的Alt + Shift + F）。这将使调试变得更加容易，并提供文档帮助，使代码更漂亮，更...。

如何在Flutter中将Clipper添加到导航抽屉

1 个答案: