Flutter: RaisedButton widget

In this post, we’ll see how to create a Button using the RaisedButton widget in Flutter.

Flutter RaisedButton class

The RaisedButton class allows you to create a button based on the Material design. The widget has a constructor that accepts the following properties.

Creating a RaisedButton

To create a simple RaisedButton, add the following code to main.dart.

import 'package:flutter/material.dart';
void main()
{
  runApp(MaterialApp(
    title: "My Application",
    home: Scaffold(
      appBar: AppBar(title: Text("My Application", textDirection: TextDirection.ltr,),),
      body: RaisedButton(
        child: Text("Click me"),
        color: Colors.green,
        onPressed: null,
      ),
      ),
    ),
  );
}

You might have noticed the button is disabled. Also, the color property that we have provided is not applied. This is because we have not provided the callback method for the onPressed event of the button. You can add a callback function as shown below.

onPressed: (){   //Do your magic here   debugPrint("Button Clicked"); },

Customizing RaisedButton

The RaisedButton we’ve created is a basic one. We can further customize the button by changing it’s color, background color, margin, padding, text size, etc. Here’s an example.

import 'package:flutter/material.dart';
void main() {
    runApp(
        MaterialApp(
            title: "My Application", 
            home: Scaffold(
                appBar: AppBar(
                    title: Text("My Application", textDirection: TextDirection.ltr, ), 
                ), 
                body: RaisedButton(
                    child: Text(
                        "Click Me", 
                        style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold), 
                    ), 
                    color: Colors.green, 
                    textColor: Colors.white, 
                    splashColor: Colors.teal, 
                    padding: EdgeInsets.all(10.0), 
                    onPressed: () {
                        debugPrint("Button pressed");
                    }, 
                ), 
            ), 
        ), 
    );
}

The following example creates a RaisedButton with LinearGradient background.

import 'package:flutter/material.dart';
void main()
{
  runApp(MaterialApp(
    title: "My Application",
    home: Scaffold(
      appBar: AppBar(title: Text("My Application", textDirection: TextDirection.ltr,),),
      body: RaisedButton(
        textColor: Colors.white,
        padding: EdgeInsets.all(0.0),
        shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
        onPressed: () {},
        child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: <Color>[
                  Color(0xFF0D47A1),
                  Color(0xFF1976D2),
                  Color(0xFF42A5F5),
                ],
              ),
              borderRadius: BorderRadius.all(Radius.circular(80.0))
          ),
          padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
          child: Text(
              'Click Me',
              style: TextStyle(fontSize: 20,)
          ),
        ),
      )
      ),
    ),
  );
}

Improving code

The above-defined methods allow only to define simple onPressed() callback methods. Also, the code will become more complex if you want to write code for some complex operations. So, if you want to get more control over the code and improve code readability, modify it as shown below.

import 'package:flutter/material.dart';
void main()
{
  runApp(MaterialApp(
    title: "My Application",
    home: Scaffold(
      appBar: AppBar(title: Text("My Application", textDirection: TextDirection.ltr,),),
      body: HomeScreen(),
      ),
    ),
  );
}

class HomeScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Text("Click Me",),
        elevation: 10.0,
        color: Colors.green,
        onPressed: ()=> BtnPressed(context),
      ),
    );
  }

  void BtnPressed(BuildContext ctx)
  {
      //Put your code here or uncomment the  below lines
      /*var _AlertDialog=AlertDialog(
        title: Text("Message"),
        content: Text("You clicked the button"),
      );

      showDialog(
        context: ctx,
        builder: (BuildContext ctx){
          return _AlertDialog;
        }
      );*/
  }
}

If you enjoyed this post, let me know by leaving a comment below.