Using Buttons and Click Events in Dart

When building interactive user interfaces with Dart especially in Flutter—understanding how to use buttons and handle click events is essential. Buttons allow users to interact with your application, and click events determine the response logic. This guide walks you through how to implement buttons in Dart using Flutter, complete with full examples and practical use cases.

Types of Buttons in Flutter (Dart Framework):

Flutter provides several button widgets:

• ElevatedButton
• TextButton
• OutlinedButton
• IconButton
• FloatingActionButton

Each button type is designed for different UI requirements, allowing customization of appearance and behavior.

Basic Example: Using ElevatedButton with Click Event

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Button Example',
      home: Scaffold(
        appBar: AppBar(title: Text('Button and Click Event')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button clicked!');
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

In the example above, the ElevatedButton widget displays a clickable button. When the user clicks it, the onPressed function triggers and prints a message to the console.

Adding Function Logic

You can also call a separate function on click:

void handleClick() {
  print("Button was pressed!");
}

ElevatedButton(
  onPressed: handleClick,
  child: Text("Press Here"),
);

Disable a Button

To disable a button, simply set onPressed: null:

ElevatedButton(
  onPressed: null,
  child: Text("Disabled Button"),
);

Advanced Usage with State Management

You can use setState() inside StatefulWidget to update the UI:

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int count = 0;

  void increment() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Counter: $count'),
            ElevatedButton(
              onPressed: increment,
              child: Text('Increase'),
            ),
          ],
        ),
      ),
    );
  }
}

For more in-depth learning about Flutter buttons, explore the Flutter official documentation.