Пользовательские кнопки флаттера в ряд

Question

Я хочу сделать кнопку, похожую на картинку выше, с флаттером.Но я понятия не имею, как это сделать ... помогите мне, пожалуйста!

Answer 1

Вы можете использовать IconButton с изображением актива, которое содержит прозрачный фон.

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

Answer 2

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, чтобы приблизить его к примеру, который я загрузил выше.

Answer 3

Чтобы создать аналогичное соединение Button, вы должны использовать виджет stack, вы можете видеть, что обе боковые кнопки одинаковы, поэтому они являются идентичными кнопками в ряду с BorderRadius.дизайн средней кнопки можно сделать, обрезав границу кнопки наполовину ее width и затем расположив ее в середине строки.