如何在颤动中将剪裁器添加到导航抽屉答案

【问题标题】：how to add clipper to navigation drawer in flutter如何在颤动中将剪裁器添加到导航抽屉
【发布时间】：2019-11-03 20:12:13
【问题描述】：

我已经创建了一个导航抽屉。但是我不知道如何使用 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))),
        ]));
  }

【问题讨论】：

你能解释一下吗？您的代码运行良好，它会剪辑小部件。你到底想达到什么目的？添加示例图像会有很大帮助。
一个小部件中的两个孩子..这很不寻常......这段代码不起作用，因为我使用了两个孩子
有一些修改将被修复，你解决了问题吗？
我这样做了：-return DrawerHeader( margin: EdgeInsets.zero, padding: EdgeInsets.zero, child: Center( child: Container( margin: EdgeInsets.all(16), child: ClipPath( clipper) : SideCutClipper(), 子: Image.network('images.pexels.com/photos/414171/…) ), ), ), );
@Arash Mohammadi 请在真实框中回答这个问题。这对其他初学者会有帮助

标签： flutter dart

【解决方案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）。这将使调试更容易，有助于文档，使代码更漂亮...... .

【讨论】：