Flutter Button Examples

In this simple tutorial you will learn how to create buttons in flutter. You will look at how to create various types of buttons. This is a practical tutorial and is based on simple step by step examples.

Example - Flutter Raised Button Example

This is an example of how to create raised buttons in flutter.

Step 1: Dependencies

No special or third party dependency is needed for this project.

Step 2: Write Code

The next step is to write our code in Dart programming language. We have only one file: main.dart.

Start by importing the material.dart package at the top of this file:

import 'package:flutter/material.dart';

Define our main() function. This is the entry point to our app. This is where we will run our app.

void main() {
  runApp(new MaterialApp(
    home: new MyApp()
  ));
}

Create a class that represents our app bu extending the StatefulWidget class:

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

Create a state class with our instance field as a string:

class _State extends State<MyApp> {
  String _value = "Hello world";

Define our event handler. This is where we will modify our state value:

  void onClick() {
    setState(() {
      _value = "My name is ami";
    });
  }

Build our widget:

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Name here'),
      ),
      body: new Container(
        padding: new EdgeInsets.all(32.0),
        child: new Column(
          children: <Widget>[
            new Text(_value),
            new RaisedButton(onPressed: onClick, child: new Text("Click me"),)
          ],
        ),
      ),
    );
  }
}

Here is the full code:

main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(new MaterialApp(
    home: new MyApp()
  ));
}
class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}
class _State extends State<MyApp> {
  String _value = "Hello world";
  void onClick() {
    setState(() {
      _value = "My name is ami";
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Name here'),
      ),
      body: new Container(
        padding: new EdgeInsets.all(32.0),
        child: new Column(
          children: <Widget>[
            new Text(_value),
            new RaisedButton(onPressed: onClick, child: new Text("Click me"),)
          ],
        ),
      ),
    );
  }
}

Run

Run the project.

Reference

Download the code using the below links:

Number	Link
1.	Download code
2.	Follow code author

Example 2: Raised Button with Event Handler Parameters

In this second example, you will look at how to pass a parameter or argument to an event handler. For example, let's say you want to pass a value dynamically to the onPressed() event, maybe then show that dynamic value when the button is pressed.

Step 1: Dependencies

No third party or special depdency is needed for this example.

Step 2: Write Dart Code

The next step is to come to our main.dart and add our imports:

import 'package:flutter/material.dart';

Then the main function that will launch our app:

void main() {
  runApp(new MaterialApp(
    home: new MyApp()
  ));
}

Then create our StatelessWidget class:

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

Then our State class:

class _State extends State<MyApp> {
  String _value = "Hello world";

Now take note below, you can see our event handler function is taking a parameter. Through this we can pass it a dynamic value.

  void _onPressed(String value) {
    setState(() {
      _value = value;
    }); 
  }

Then here is how we use it with our RaisedButton:

 new RaisedButton(onPressed: () => _onPressed("Hai Ami"), child: new Text("Click me"),)

Here is the full code:

main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(new MaterialApp(
    home: new MyApp()
  ));
}
class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}
class _State extends State<MyApp> {
  String _value = "Hello world";
  void _onPressed(String value) {
    setState(() {
      _value = value;
    }); 
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Name here'),
      ),
      body: new Container(
        padding: new EdgeInsets.all(32.0),
        child: new Column(
          children: <Widget>[
            new Text(_value),
            new RaisedButton(onPressed: () => _onPressed("Hai Ami"), child: new Text("Click me"),)
          ],
        ),
      ),
    );
  }
}

Reference

Download the code using the below links:

Number	Link
1.	Download code
2.	Follow code author