连续自定义颤振按钮答案

【问题标题】：Custom Flutter Buttons in a row连续自定义颤振按钮
【发布时间】：2019-07-06 21:49:48
【问题描述】：

我想用 Flutter 制作一个看起来像上图的 Button。但我不知道怎么做……请帮帮我！

【问题讨论】：

到目前为止你都尝试过什么。
我完成并上传了下面的代码。 :)

【解决方案1】：

Widget _startButton(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 250.0),
      child: Stack(
        children: <Widget>[
          Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                _buildSideButtons(context, Icons.settings, palette.limeYellow,
                    const EdgeInsets.only(right: 30.0)),
                _buildSideButtons(context, Icons.lightbulb_outline,
                    palette.limeGreen, const EdgeInsets.only(left: 30.0)),
              ],
            ),
          ),
          Center(
              child: Container(
                  width: MediaQuery.of(context).size.width * 0.35,
                  height: MediaQuery.of(context).size.height,
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        gradient: LinearGradient(
                            begin: Alignment.centerLeft,
                            end: Alignment.centerRight,
                            colors: [palette.limeYellow, palette.limeGreen])),
                  ))),
          Center(
              child: Container(
                  width: MediaQuery.of(context).size.width * 0.275,
                  height: MediaQuery.of(context).size.height,
                  child: new RaisedButton(
                      elevation: 0.0,
                      color: Colors.white,
                      child: new Text(
                        "START",
                        style: TextStyle(
                            fontFamily: "Bebas Neue",
                            fontSize: 25.0,
                            fontWeight: FontWeight.bold),
                      ),
                      onPressed: () => Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (BuildContext context) => CountDown())),
                      shape: CircleBorder())))
        ],
      ),
    );
  }


  Widget _buildSideButtons(
      BuildContext context, IconData icon, Color coverColor, EdgeInsets pad,
      {VoidCallback navigate}) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.07,
      child: RaisedButton(
        elevation: 5.0,
        onPressed: () {},
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(50.0))),
        child: Container(
          child: Padding(
            padding: pad,
            child: Icon(icon, color: Colors.black),
          ),
        ),
        color: coverColor,
        textColor: Colors.white,
      ),
    );
  }

我使用了堆栈和凸起按钮，终于成功了！谢谢你的建议。我只需要添加 boxShadow 使其接近我上面上传的示例图片。

【讨论】：

【解决方案2】：

要制作类似的复合Button，您应该使用stack 小部件，您可以看到两个侧边按钮相同，因此它们是带有BorderRadius 的相同按钮。他们的中间按钮设计可以通过将按钮边框剪裁到其width 的一半然后将其放置在行的中间来完成。

【讨论】：

感谢您的提示。我做到了，并上传了下面的代码。

【解决方案3】：

您可以将IconButton 与包含透明背景的资产图像一起使用。

IconButton(
     icon: Image.asset('assets/your/transperantBG/icon.png'),
    onPressed: (){},
)

【讨论】：

制作一个看起来像您的按钮的图像，然后制作 InkWell 的子元素。
感谢您提供一个想法，不知何故我做到了！鳕鱼在下面