Flutter: RaisedButton widget

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.

PROPERTY DESCRIPTION
colorDefines the color used as the background color of the button when it is not pressed or disabled.
textColorColor of the text that appears on the button.
elevationA floating value that defines the elevation of the button.
splashColor Splash indicates that the button is touched and splashColor indicates the color of the button when it is touched.
highlightColor The color of the button when it is pressed.
shapeDefines the shape of the button.
colorBrightness Defines the brightness of the button.
padding A floating value that defines padding for the child of the button.
disabledTextColor Color of the text when the button is disabled.
disabledColor Color of the button when it is disabled.

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.

raised button with linear gradient 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.


Share Tweet Send
0 Comments
Loading...