Flutter onPressed Implementation Example with Steps

The flutter onPressed() function allows you to add functionality to a button. In this entire tutorial, you will learn how to add functionality to an icon button.

Example of onPressed property in flutter

In this example, I will first create an icon button using IconButton() class and then will add functionality using onPressed properly.

The syntax for the IconButton

IconButton(
              icon: your_icon_here,
              onPressed: () {
                // add functionality here
              },

Steps to implement onPressed Property

Step 1: Create a Home Stateful Widget

The first step is to create a Home Stateul widget that will contain an icon button at the center of the body with text. When the user will click on it it will change the color of the Icon Button . Use the following lines of code to create Home page for the app.

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State {
  Color color = Colors.red;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter OnPressed Example"),
      ),
      body: Center(
          child: IconButton(
        icon: Icon(
          Icons.home,
          color: color,
          size: 50,
        ),
        onPressed: () {
          setState(() {
            color = Colors.blue;
          });
        },
      )),
    );
  }
}

Here you can see I have defined an IconButton() and inside it, there is an icon, color, and size and also a defined onPressed attribute where you can add your own logic for icon button manipulation.

Step 2: Create a Main Widget class

The second step is to create a Main widget class that will use MaterialApp(), class, with Home() class as the main page of the app. Add the following lines of code in the main.dart file.

import 'package:flutter/material.dart';
import 'package:flutter_tutorial/pages/home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

Step 3: Run the app

Now the last step is to run the app. In flutter, you can run the app using runApp(your_main_class) function.  I have already added this code. When you will run the code you will get the following output.

Before Clicking onPressed 

After Clicking onPressed

Conclusion

Flutter onPressed are mostly provided with any button in the Flutter. You can add your logic to manipulate the button. These are steps for implementing an IconButton with onPressed example. I hope you have liked this tutorial. If you have any queries then you can contact us for more help.

Source:

Flutter Documentation