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