<p>In this article, I'm going to share a few examples of how to style the buttons. I'll try to add more examples as we move further.</p> <ol> <li>Buttons Bar</li> </ol> <p>![](/Uploads/bb135d9f-f9c9-41cf-9314-50b1ff26277a.jpgwidth="50%height="auto](</p> <p>You can achieve this using below code,</p> <p>import 'package:flutter/material.dart';</p> <p>void main() => runApp(new MyApp());</p> <p>class MyApp extends StatelessWidget { // This widget is the root of your application.</p> <p>@override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } }</p> <p>class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);</p> <p>final String title;</p> <p>@override _MyHomePageState createState() => new _MyHomePageState(); }</p> <p>class _MyHomePageState extends State { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child:</p> <pre> // Below is the code which will help you to achive Buttons Bar as show above
new Row(
children: [
new RaisedButton(
child: Text('Online'),
onPressed: null,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.horizontal(
left: Radius.circular(30.0),
right: Radius.circular(0.0)))),
new RaisedButton(
child: Text('Offline'),
onPressed: null,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.horizontal(
left: Radius.circular(0.0),
right: Radius.circular(30.0)))),
],
mainAxisSize: MainAxisSize.min,
),
),
);
</pre>
<p>}
}</p>
<p></p> <p>See this code in the above example,</p> <p>[ new RaisedButton( child: Text('Online'), onPressed: null, shape: RoundedRectangleBorder( borderRadius: BorderRadius.horizontal( left: Radius.circular(30.0), right: Radius.circular(0.0)))), new RaisedButton( child: Text('Offline'), onPressed: null, shape: RoundedRectangleBorder( borderRadius: BorderRadius.horizontal( left: Radius.circular(0.0), right: Radius.circular(30.0)))), ], mainAxisSize: MainAxisSize.min, ), </p>
<p>Hope this is helpful. Will share you more examples as we move further.</p>
<p>Thanks,
Srikanth</p>