Create a custom RawMaterial button in Flutter

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 []
class MButon extends StatelessWidget {
  MButon({@required this.onPressed,@required this.title,, 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;

  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:  [
              newicon!=null ? newicon :,
              color: iconColor!=null ? iconColor: Colors.amber,
              width: 8,
              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

          borderRadius: BorderRadius.all(Radius.circular(10))),


Here is Quick and Simple Floating button. Include the .dart[the above code] file to lib directory and import in main.drt.

        title: 'About',
        style: TextStyle(color:,
        background_color: Colors.deepOrange,
        newshape: RoundedRectangleBorder(
           borderRadius: BorderRadius.all(Radius.circular(10))),
        onPressed: () { 

The complete code and other Widgets projects can be located @ Flutter-Widgets GitHub Repository

Published by


A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.