DEV Community: AR Rahman

Can you connect two widget in Flutter using LayerLink?

AR Rahman — Wed, 24 Sep 2025 19:53:11 +0000

LayerLink is a powerful Flutter concept that enables precise widget positioning. Let me break it down:

What is LayerLink?

LayerLink creates a connection between two parts of the widget tree that might be in different contexts (like between a widget and an overlay). It's part of Flutter's composited layers system.

How It Works

Think of it as an "invisible string" that connects two widgets:

CompositedTransformTarget (source) ← LayerLink → CompositedTransformFollower (follower)

Why It's Needed in Your Popup

In your case, you have:

Button in the main widget tree (scrollable content)
Popup menu in the Overlay (fixed screen position)

Without LayerLink, when you scroll, the button moves but the popup stays in the same screen position.

The Magic: How It Maintains Position

class _InlineFilterPopupState extends State<InlineFilterPopup> {
  final LayerLink _layerLink = LayerLink(); // ← Creates the link
  final GlobalKey _iconKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return CompositedTransformTarget( // ← Source widget
      link: _layerLink, // ← Connect the link
      child: IconButton(
        key: _iconKey,
        icon: const Icon(Icons.filter_list),
        onPressed: _toggleMenu,
      ),
    );
  }

  void _showMenu() {
    _overlayEntry = OverlayEntry(
      builder: (context) => Stack(
        children: [
          Positioned(
            child: CompositedTransformFollower( // ← Follower widget
              link: _layerLink, // ← Same link connection
              showWhenUnlinked: false,
              offset: Offset(0, 40), // Position relative to target
              child: Material(
                // Your popup menu content
                child: _buildMenuContent(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

What Happens During Scrolling

User scrolls → Button moves within the scrollable area
CompositedTransformTarget detects position changes
LayerLink automatically updates the connection
CompositedTransformFollower receives new position data
Popup menu moves to maintain relative position to the button

Visual Example

Before Scroll:
┌─────────────────────┐
│ [Button]            │
│                     │
│ ┌─────────────────┐ │
│ │     Popup       │ │
│ └─────────────────┘ │
│                     │
└─────────────────────┘

After Scroll Down:
┌─────────────────────┐
│                     │
│                     │
│ [Button]            │
│ ┌─────────────────┐ │
│ │     Popup       │ │
│ └─────────────────┘ │
└─────────────────────┘

The popup automatically follows the button!

Key Properties

`showWhenUnlinked`

true: Follower shows even when target is not in tree
false: Follower hides when target is not available

`offset`

Relative position from the target:

offset: Offset(0, 40) // 0px right, 40px down from button
offset: Offset(-20, 0) // 20px left, same vertical position

Without LayerLink vs With LayerLink

Without LayerLink:

// Popup stays at fixed screen coordinates
Positioned(
  top: 100, // Fixed position
  left: 100,
  child: PopupMenu(),
)
// When scrolling: Button moves, popup stays in place ✓

With LayerLink:

// Popup follows the button dynamically
CompositedTransformFollower(
  link: _layerLink,
  offset: Offset(0, 40),
  child: PopupMenu(),
)
// When scrolling: Popup moves with the button ✓

Real-World Analogies

Magnets: Like two magnets that stay connected even when you move one
Parent-Child Leash: Like a parent holding a child's hand - when parent moves, child follows
GPS Tracker: Always knows the current position of the target

Technical Deep Dive

Under the hood, LayerLink uses Flutter's CompositedTransformTargetLayer and CompositedTransformFollowerLayer:

// Simplified internal implementation
class CompositedTransformTarget extends SingleChildRenderObjectWidget {
  final LayerLink link;

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderCompositedTransformTarget(
      link: link,
    );
  }
}

class CompositedTransformFollower extends SingleChildRenderObjectWidget {
  final LayerLink link;
  final Offset offset;

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderCompositedTransformFollower(
      link: link,
      offset: offset,
    );
  }
}

When to Use LayerLink

Use LayerLink when you need:

✅ Popups that follow scrolling content
✅ Tooltips attached to moving elements
✅ Custom dropdown menus in scrollable areas
✅ Any "attached" UI that should move with its parent

When NOT to Use LayerLink

Don't use when:

❌ Simple fixed-position overlays
❌ Modal dialogs that should center on screen
❌ UI elements that shouldn't move with content

Summary

LayerLink is essentially a "live positioning cable" that:

Connects two widgets in different parts of the tree
Automatically updates positions during layout changes
Enables advanced UI patterns like following popups
Uses Flutter's compositing layer system for performance

How to Create a PDF in Any Language with Flutter

AR Rahman — Sun, 24 Aug 2025 17:33:51 +0000

pdf_maker is a powerful Flutter plugin that enables developers to design and generate high-quality PDF documents with complete control over layout, fonts, and language support. Whether you are building invoices, certificates, reports, or multilingual publications, pdf_maker ensures accurate rendering without breaking fonts or compromising quality.

Key Benefits

Any Language, Any Font – Full Unicode support ensures proper rendering for all scripts, including Arabic, Bengali, Chinese, Japanese, and more.
Design Flexibility – Build fully customized page layouts with Flutter widgets.
High-Quality Output – Fonts and images remain sharp and accurate in the final PDF.
Multi-Page Support – Easily combine multiple pages into a single document.
Real-Time Preview – Adjust layouts and see changes immediately during development.
Optimized Performance – Lightweight and fast with minimal configuration required.

Installation

Add pdf_maker to your pubspec.yaml:

dependencies:
  pdf_maker: ^1.1.0

Then run:

flutter pub get

Quick Start Guide

1. Create a Custom Page

Extend the BlankPage class to define your page layout using Flutter widgets.

import 'package:flutter/material.dart';
import 'package:pdf_maker/pdf_maker.dart';

class TestPage extends BlankPage {
  const TestPage({super.key});

  @override
  Widget createPageContent(BuildContext context) {
    return const Center(
      child: Text(
        'السلام عليكم', // Example: Arabic text
        style: TextStyle(fontSize: 28),
      ),
    );
  }
}

2. Generate a Single-Page PDF

Use the static createPDF method to quickly generate and save a PDF.

ElevatedButton(
  onPressed: () async {
    final pdfFile = await BlankPage.createPDF(
      const TestPage(),
      setup: PageSetup(context: context),
    );
    saveAndOpen(pdfFile); // Implement your own file saving and opening method
  },
  child: const Text("Create PDF"),
);

3. Generate a Multi-Page PDF

const pages = [Page1(), Page2(), Page3()];

final setup = PageSetup(
  context: context,
  quality: 4.0,
  scale: 1.0,
  pageFormat: PageFormat.a4,
  margins: 40,
);

ElevatedButton(
  onPressed: () async {
    final maker = PDFMaker();
    final pdfFile = await maker.createMultiPagePDF(pages, setup: setup);
    saveAndOpen(pdfFile);
  },
  child: const Text("Create Multi-Page PDF"),
);

4. One-Line PDF Generation

For cleaner and more concise PDF creation:

// Single Page
final pdfFile = await const TestPage().toPDF(
  setup: PageSetup(context: context),
);

// Multiple Pages
const pages = [Page1(), Page2(), Page3()];
final multiPagePdf = await pages.toPDF();

Ideal Use Cases

Multilingual invoices, reports, and certificates
Books, magazines, or brochures in any language
Marketing materials with custom branding
Print-ready documents with precise layouts
Applications that require dynamic PDF generation with complex typography

Why Choose pdf_maker

Unlike many other PDF generation tools, pdf_maker preserves the exact look of your Flutter UI while supporting any language or font. It avoids rasterization, ensuring that text remains selectable, fonts render correctly, and images stay crisp.