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

Question

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

Answer 1

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

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

https://stackru.co m/images/be928c3e1a6033ad2c50772b4c7e5f4ab43abf01.png

Answer 3

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

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