How to Add a Button in Flutter

If you are an absolute beginner in Flutter and don’t know how to add a Button in Flutter then this Flutter beginner tutorial is for you!

In this minimal Flutter button example, I am going to use Raised Button widget. The RaisedButton is a material widget whose elevation increases when the button is pressed. This is what we normally want in our mobile apps.

I hope you already know how to create and run Flutter apps in your PC. Here, I am sharing the code of main.dart file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Button Example'),
        ),
        body: Center(
          child: 
         RaisedButton(
            onPressed: () {},
            child: const Text('My First Button!', style: TextStyle(fontSize: 20)),
            color: Colors.blue,
            textColor: Colors.white,
            elevation: 5,
          )
        ),
      ),
    );
  }
}

The output of Flutter Button example:

Raised Button has many useful props. The onPressed prop is used for triggering press actions whereas elevation prop defines the shadow height. color and textColor are used for styling the raised button. If you don’t want any kind of material effects in your button then you can choose Flat Button widget.

2 thoughts on “How to Add a Button in Flutter”

  1. Pingback: How to Create a Gradient Button in Flutter – Flutter For You

  2. Pingback: How to Add a Flat Button in Flutter – Flutter For You

Leave a Comment

Your email address will not be published. Required fields are marked *