Buttons in Flutter

This Article is posted by seven.srikanth at 8/7/2018 6:11:15 PM

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. 1) Buttons Bar ![](/Uploads/bb135d9f-f9c9-41cf-9314-50b1ff26277a.jpgwidth="50%height="auto]( You can achieve this using below code, import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @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'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: // 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, ), ), ); } } ` See this code in the above example, [ 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, ), ` Hope this is helpful. Will share you more examples as we move further. Thanks, Srikanth

Tags: Buttons in Flutter; Buttons Bar in Flutter; Join two buttons and style them in flutter; Curved edges for Button;



0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.




© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com