problem statement
One of the most common widgets in Flutter is Material Dropdown. It has proven to be very useful when working with forms. However, there's a problem: it's not customizable! How do you create something like the image below? It's not possible to do this with the current material dropdown in Flutter.
In this article, we will learn how to create our own custom dropdown menu using OverlayPortal. OverlayPortal is a new Flutter widget launched after Flutter 3.10. This new API allows us to create overlays in a declarative way.
So here's the plan: We'll take you on a tour of OverlayPortal — discover what it is, how to use it, and the exciting possibilities it opens up for creative design. Additionally, we'll walk you through the process of building a custom dropdown using the OverlayPortal functionality.
Goal: Custom dropdown menu
After we understand OverlayPortal our next goal is to create the following custom dropdown widget.
Understanding Overlay and OverlayPortal
The question is: what exactly is Overlay and OverlayPortal?
Before diving into creating a custom dropdown, let's go over the basics of Overlay and what the OverlayPortal brings to the table.
cover
As stated in the documentation