Overlay in flutter

As you know, overlay in flutter are imperative, But what if I told you then you can me them in declarative way.

Yes, Flutter portal makes it very easy for us. Let’s see how to use flutter portal to make declartive overlay.

// Add flutter_portal to your pub dependency
flutter_portal: ^latest_version

Now, Let suppose we can to create a barrier over widget with black color.

PortalTarget(
  visible: visible,
  closeDuration: closeDuration,
  anchor: Aligned.center,
  portalFollower: GestureDetector(
     behavior: HitTestBehavior.opaque,
     onTap: onClose,
     child: TweenAnimationBuilder<Color>(
      duration: kThemeAnimationDuration * 2,
      tween: ColorTween(
         begin: Colors.transparent,
         end: visible ? const Color(0x8F0E0E0E) : Colors.transparent,
      ),
      builder: (context, color, child) {
        return ColoredBox(color: color);
      },
    ),
  ),
  child: child,
)

If we use this code, When visible is true this will overlay black color over widget. Here child refer to widget on which we are drawing overlay and portalFollower refer to widget which behaves as overlay. Based on anchor you can align your portalFollower w.r.t. child.

And we successfully created overlay in declarative way.

Hope to see you in coming article.