Raised Button Class in Flutter Material Library with Example

Raised button class comes with a slight elevation in its structure on tapping by the user. They have several properties like text color, shape, padding, button color, etc. These are rectangular in shape by default which cannot be altered and have UI along their z-axis. It is a deprecated class, and an elevated button is preferred over raised buttons. because there is no specific single-valued button theme present with a raised button, you have to customize it according to your own requirements.

Disclaimer: As of June 2022 the RaisedButton class in flutter is deprecated. ElevatedButton class should be used instead. The later class will eventually be removed from flutter SDK, so it is suggested to move to the newer class.

Constructor

RaisedButton(
    {Key key, 
    @required VoidCallback onPressed, 
    VoidCallback onLongPress, 
    ValueChanged<bool> onHighlightChanged, 
    MouseCursor mouseCursor, 
    ButtonTextTheme textTheme, 
    Color textColor, 
    Color disabledTextColor, 
    Color color, 
    Color disabledColor, 
    Color focusColor, 
    Color hoverColor, 
    Color highlightColor, 
    Color splashColor, 
    Brightness colorBrightness, 
    double elevation, 
    double focusElevation, 
    double hoverElevation, 
    double highlightElevation, 
    double disabledElevation, 
    EdgeInsetsGeometry padding, 
    VisualDensity visualDensity, 
    ShapeBorder shape, 
    Clip clipBehavior: Clip.none, 
    FocusNode focusNode, 
    bool autofocus: false, 
    MaterialTapTargetSize materialTapTargetSize, 
    Duration animationDuration, 
    Widget child}
)

A raised button uses a number of properties, the most common ones are explained below:

color: defines the color of the button. 

RaisedButton(
             color: Colors.green,
             child: Text('Raised Button'),
             onPressed: () {}            
           ),

Output:

elevation: defines the increment in the breadth of the button towards the surface of the screen.

RaisedButton(
             elevation: 5,
             color: Colors.green
             child: Text('Raised Button'),
             onPressed: () {}
           ), 

Output:

hoverColor: defines the color of the button when tapped 

RaisedButton(
             hoverColor:Colors.yellow ,
             color: Colors.green,
             elevation: 5,
             child: Text('Raised Button'),
             onPressed: () {}
           ), 

Output:

textColor: defines the color of the text inside the button

RaisedButton(
textColor: Colors.white,
             color: Colors.green,
             elevation: 5,
             textColor: Colors.white,
             hoverColor:Colors.yellow ,
             child: Text('Raised Button'),
             onPressed: () {}
           ), 

Output:

padding: defines the gap between the border and the text 

RaisedButton(
             padding: EdgeInsects.all(5),
             color: Colors.green,
             elevation: 5,
             textColor: Colors.white,
             hoverColor:Colors.yellow ,
             child: Text('Raised Button'),
             onPressed: () {}
           ), 

Output:

Some of the other properties of raised buttons are as follows

• clipBehavior: decides whether the text inside the button will be clipped or not.
• colorBrightness: decides the theme-brightness to be used inside the button.
• disabledColor: decides the color of the button when it is inactive.
• disabledElevation: decides the elevation height of the button when it is inactive.
• highlightElevation: decided the elevation height of the button when it is tapped by the user.
• onLongPress: The callback function when the button is pressed a little longer than usual.
• onPressed: The callback function when the button is tapped.
• visualDensity: displays the layout compactness of the button by taking in the VisualDensity class as the object.
• enableFeedback: controls whether there will be sound or vibration when the button is clicked.
• focusColor: decides the color of the button at the time of input focus.
• focusElevation: controls the location of RaisedButton at the z-axis.
• focusNode: decides the focus nodes as a class object.

Methods used in raised buttons are as follows

• build(BuildContext context: Describes the part of the user interface
• createElement: creates a StatelessElement to manage this widget's location in the tree.
• debugDescribeChildren(): Returns a list of DiagnosticsNode objects describing this node's children
• debugFillProperties: Add additional properties associated with the node
• noSuchMethod: Invoked when a non-existent method or property is accessed
• toDiagnosticsNode: Returns a debug representation of the object that is used by debugging tools 
• toString: A string representation of this object
• toStringDeep: Returns a string representation of this node and its descendants.
• toStringShallow: Returns a one-line detailed description of the object
• toStringShort: A short, textual description of this widget.

Let's closely understand a raised button with the help of an example.

Example

import 'package:flutter/material.dart';

void main() {
  runApp(const HomeApp());
}

class HomeApp extends StatefulWidget {
  const HomeApp({Key? key}) : super(key: key);

  @override
  State<HomeApp> createState() => _HomeAppState();
}

class _HomeAppState extends State<HomeApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.green)),
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(builder: (context) => const NewScreen()),
        ),
        child: const Text('Raised Button'),
      ),

      // RaisedButton is deprecated and should not be used in new code.
      // Use ElevatedButton instead.

      // child: RaisedButton(
      //   padding: EdgeInsets.all(5),
      //   color: Colors.green,
      //   textColor: Colors.white,
      //   hoverColor: Colors.yellow,
      //   onPressed: () => Navigator.of(context)
      //       .push(MaterialPageRoute(builder: (context) => const NewScreen())),
      //   child: const Text('Raised Button'),
      // ),
    );
  }
}

class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);

  @override
  State<NewScreen> createState() => _NewScreenState();
}

class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();

  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: const Center(child: Text('This is your new screen')),
    );
  }
}

Output: