flutter - How to use IconButton onPressed

Flutter - IconButton onPressed

The IconButton class represents a material design icon button. IconButton is a picture printed on a material widget that reacts to touches by filling with color. The flutter developers commonly used the Icon buttons in the AppBar actions field, but IconButtons can also be used in many other places. The flutter app developers can leave the onPressed callback null to disable an IconButton, it will not react to touch.

The following flutter app development tutorial will demonstrate how to use IconButton onPressed property. The IconButton onPressed property makes the button clickable when the developers set a value to it. If they pass a null value to this onPressed property value the button act as disable/nonclickable. Actually, the onPressed property is used to trigger an action when someone clicks the IconButton widget.

The IconButton class’s onPressed property value is a callback that is called when the button is tapped or otherwise activated. When the flutter developers set this property value to null, the button will be disabled. In this flutter example code, we increase a counter when the user presses the IconButton widget. We put the counter code inside the IconButton widget’s onPressed property value section.

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.pink),
        home: const MyHomePage()
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text("Flutter - IconButton onPressed")
        ),
        body: bodyContent()
    );
  }

  bodyContent() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
              "Counter $_counter",style:
          const TextStyle(
              fontSize: 26, fontWeight: FontWeight.bold
          )),
          const SizedBox(height: 24),
          IconButton(
            onPressed: () {
              setState(() {
                _counter++;
              });
            },
            icon: const Icon(Icons.add_circle),
            iconSize: 64,
            color: Colors.indigo
          )
        ],
      ),
    );
  }
}