Custom Flutter Buttons in a row

Question

I want to make a Button that looks like the picture above with Flutter. But I have no idea how to make it... help me, please!

What have you tried till now. – vipin agrahari Feb 13 '19 at 06:25 — vipin agrahari, Feb 13 '19 at 06:25
I completed it and uploaded the code below. :) – Kim Dojin Feb 14 '19 at 07:12 — Kim Dojin, Feb 14 '19 at 07:12

score 8 · Answer 1 · answered Feb 13 '19 at 07:58

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

I used Stack and Raised Buttons and finally made it! Thank you for the advice. I simply need to add boxShadow to make it close to the example picture I uploaded above.

score 2 · Accepted Answer · answered Feb 13 '19 at 06:26

2

To make a similar compound Button you should use a stack widget, you can see that both the side buttons are same so they are identical buttons in a row with a BorderRadius. they design of the middle button can be done by clipping button border by half of its width and then lay it out at the middle of the row.

answered Feb 13 '19 at 06:26

Mazin Ibrahim

7,433
2
33
40

Thank you for the tip. I made it, and uploaded the code below. – Kim Dojin Feb 14 '19 at 07:12

score 0 · Answer 3 · answered Feb 13 '19 at 06:31

0

You can make use of an IconButton with an asset image which contain a transparent background.

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

answered Feb 13 '19 at 06:31

krishnakumarcn

3,959
6
39
69

make an image which looks like your button and, make the child of InkWell. – satish Feb 13 '19 at 06:53
thank you for giving an idea, I somehow made it! The cod is below – Kim Dojin Feb 14 '19 at 07:11

Custom Flutter Buttons in a row

3 Answers3