Custom buttons help us create new UI with additional feature, Flutter allows you to create awesome controls/widgets combining existing ones. Our material button have following features
- Icon
- Icon Color
- Splash color
- Back ground color
- Shape
- title
To make this possible we used 7 widgets , lets checkout the code
import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; //This Widget written by [manojap.github.io] class MButon extends StatelessWidget { MButon({@required this.onPressed,@required this.title, this.style, this.splash, this.background_color, this.newshape, this.newicon, this.iconColor}); final String title; final GestureTapCallback onPressed; final TextStyle style; final Color splash; final Color background_color; final ShapeBorder newshape; final IconData newicon; final Color iconColor; @override Widget build(BuildContext context) { return RawMaterialButton( fillColor: background_color, splashColor: splash, shape:newshape!=null ? newshape: const StadiumBorder(), child: Padding( padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20), child: Row(mainAxisSize: MainAxisSize.min, children: [ Icon( newicon!=null ? newicon : Icons.help, color: iconColor!=null ? iconColor: Colors.amber, ), SizedBox( width: 8, ), Text( title, style: style, ), ], ), ), onPressed: onPressed, ); } }
We have used Padding to accommodate space between borders and Text, so that the Text widget look neat and nice. A SizeBox widget is placed between Icon and the Text Widgets which add blank space.
You also noticed that we have checked for nulls make sure the Shape property not null ( It will fire an error , if it leave blank), if so it used an stadium border. You can also use the other borders like
RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
Example
Here is Quick and Simple Floating button. Include the .dart[the above code] file to lib directory and import in main.drt.
MButon( title: 'About', style: TextStyle(color: Colors.black), background_color: Colors.deepOrange, splash: Colors.orange, newshape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10))), onPressed: () { })