Flutter Raised Button Example

Buttons are the basic UI component of any framework. In this tutorial, we will do a Flutter Raised Button Example. Flutter’s basic motto is to create stunning UI.  There are 7 different types of buttons in Flutter. Here you can learn about all those flutter’s buttons

• Floating Action Button
• Popup Menu Button
• Flat Button
• Icon Button
• Drop Down Button
• Button Bar

Let’s get back to our Flutter Raised Button example. RaisedButton is part of Material UI. To use Flutter RaisedButton Widget this is all the widget code you need to create simple button.

RaisedButton(child: Text("Rock & Roll"),
                onPressed: _changeText,
                color: Colors.red,
                textColor: Colors.yellow,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                splashColor: Colors.grey,
              )

RaisedButton Properties

Raised button has a single constructor but a long list of attributes. I am just mentioning the basic one we have used.

• onPressed: onPressed function is called when we click on the button.
• color: Color set the button color. Our button color is red.
• textColor: This attribute is used to give the color to button’s text.
• padding: Padding to the text inside the button.
• splashColor: A color effect that we get when we click on the button.

You may have noticed onPressed we are calling a function _changeText. This function is basically changing the text when we click on the button. 

_changeText() {
    setState(() {
      if (msg.startsWith('F')) {
        msg = 'I have learned FlutterRaised example ';
      } else {
        msg = 'Flutter RaisedButton example';
      }
    });
  }

In _changeText function we are using a function called setState(). It let the framework knows that internal state of the object has been changed.

As we are pretty much clear about flutter Raised button. It is time to show you the complete code of this example.

Flutter Raised Button Example Code

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(title: "RaisedButton", home: MainActivity()));

class MainActivity extends StatefulWidget {
  @override
  _MainActivityState createState() => _MainActivityState();
}

class _MainActivityState extends State {
  String msg = 'Flutter RaisedButton example';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.yellow,
      appBar: AppBar(
        title: Text('Raised Button'),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                msg,
                style: TextStyle(fontSize: 20, fontStyle: FontStyle.italic),
              ),
              RaisedButton(
                child: Text("Rock & Roll"),
                onPressed: _changeText,
                color: Colors.red,
                textColor: Colors.yellow,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                splashColor: Colors.grey,
              )
            ],
          ),
        ),
      ),
    );
  }

  _changeText() {
    setState(() {
      if (msg.startsWith('F')) {
        msg = 'I have learned FlutterRaised example ';
      } else {
        msg = 'Flutter RaisedButton example';
      }
    });
  }
}

 If you don’t know how to setup Flutter on your system. Please read how to install flutter- Super Easy