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

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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.