CloseButton in Flutter

In Flutter, a CloseButton is a widget that provides a button to close or dismiss a screen, dialog, or other widget. It is typically used to allow users to exit or cancel an action.

Properties:

• onPressed: The callback function to handle the close button press.
• color: The color of the close button icon.
• tooltip: The tooltip to display when the close button is long-pressed.
• highlightColor: The color of the close button when pressed.

CloseButton(
  onPressed: () {
    Navigator.pop(context);
  },
  color: Colors.white,
)

import 'package:flutter/material.dart';

// Define the CloseButtonDemo widget, which is a StatefulWidget
class CloseButtonDemo extends StatefulWidget {
  // Constructor for CloseButtonDemo widget
  const CloseButtonDemo({Key? key}) : super(key: key);

  @override
  State<CloseButtonDemo> createState() => _CloseButtonDemoState();
}

// State class for CloseButtonDemo
class _CloseButtonDemoState extends State<CloseButtonDemo> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      // Ensures the widget is positioned within the safe area of the screen (avoiding notches, status bar, etc.)
      child: Scaffold(
        // Provides the basic material design visual layout structure
        appBar: AppBar(
          // Title of the AppBar
          title: Text(
            "Close Button",
            style: TextStyle(
              color: Colors.white, // Title text color
              fontWeight: FontWeight.bold, // Title text weight
            ),
          ),
          flexibleSpace: Container(
            // Custom decoration for the AppBar
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.deepPurple, Colors.orangeAccent], // Gradient colors
                begin: Alignment.topLeft, // Gradient start alignment
                end: Alignment.topRight, // Gradient end alignment
              ),
            ),
          ),
          leading: CloseButton(
            // CloseButton widget to provide a close functionality
            color: Colors.white, // Icon color
            onPressed: () {
              // When the CloseButton is pressed, navigate back to the previous screen
              Navigator.pop(context);
            },
          ),
        ),
        body: Column(
          children: [
            // This is where you can add other widgets for the body of the Scaffold
          ],
        ),
      ),
    );
  }
}