连续的自定义 Flutter 按钮

Question

我想用Flutter做一个像上图这样的Button。但是我不知道怎么做...请帮助我！

Answer 1

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

Answer 2

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

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

Answer 3

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,
      ),
    );
  }

我使用了 Stack 和 Raised Buttons，终于成功了！谢谢你的建议。我只需要添加 boxShadow 使其接近我上面上传的示例图片。

连续的自定义 Flutter 按钮

Custom Flutter Buttons in a row

button

flutter

custom-button