Flutter three dot icon

by

Flutter Three Dot Icon

Flutter provides different ways to implement a three-dot (also known as an overflow) icon. The three-dot icon is commonly used to indicate additional options or actions in an app’s user interface.

Method 1: Using the IconButton Widget

One way to implement the three-dot icon is by using the IconButton widget provided by Flutter. The IconButton widget is typically used to display an icon that triggers a specific action when tapped.

Here’s an example of implementing the three-dot icon using the IconButton widget:

{% raw %}
import 'package:flutter/material.dart';

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
        actions: [
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {
               // Handle the actions when the three-dot icon is tapped.
            },
          ),
        ],
      ),
      body: Container(
        // Your app's content goes here
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyPage()));
}
{% endraw %}

In the above example, the three-dot icon is added to the app bar’s actions list using the IconButton. When the icon is tapped, you can handle the actions inside the onPressed callback.

Method 2: Custom Three Dot Icon

If you want a more customized three-dot icon, you can create your own widget to represent it. This allows you to have full control over the design and behavior of the icon.

Here’s an example of creating a custom three-dot icon using the Icon and GestueDetector widgets:

{% raw %}
import 'package:flutter/material.dart';

class ThreeDotIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // Handle the actions when the custom three-dot icon is tapped.
      },
      child: Container(
        width: 24,
        height: 24,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.grey,
        ),
        child: Center(
          child: Icon(
            Icons.more_horiz,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
        actions: [
          ThreeDotIcon(),
        ],
      ),
      body: Container(
        // Your app's content goes here
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyPage()));
}
{% endraw %}

In this example, a custom ThreeDotIcon widget is created. It uses a GestueDetector widget to handle tap events and a Container with a circle shape to represent the three-dot icon. Inside the container, an Icon widget is placed to display the three dots. Modify the onTap callback in the GestureDetector to handle the actions when the custom icon is tapped.

These are just two ways to implement the three-dot icon in Flutter. Flutter provides various other widgets and techniques to achieve the desired result based on your specific requirements.

Leave a comment