Custom Flutter Buttons in a row - button

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!

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

Answer 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.

Answer 3

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: (){},
)