Skip to content

Instantly share code, notes, and snippets.

@jezell
jezell / updated.md
Created December 6, 2024 08:06
bug updated

Below is an updated fix that aligns with the current version of the vector_graphics source code you provided. The original issue involved a runtime crash (_TypeError) occurring when attempting to draw <image> elements. With the newer code that uses ImmutableBuffer and ImageDescriptor, the decoding pipeline is already correct. The likely cause of the crash is that onDrawImage may be invoked before the image has finished decoding or if the image failed to decode, resulting in a null lookup from the _images map.

To address this safely, we should:

  1. Check if the image is available in _images before drawing.
  2. If the image is not yet ready or failed to load, handle the scenario gracefully (e.g., skip drawing or report an error).

Updated onDrawImage method:

@jezell
jezell / gist:8a56f7d484cf0535863ccb0a7e00ea4e
Created December 13, 2024 16:52
Flutter Widget Preview.md

Why this approach is problematic

  1. Over-Complex Architecture:
    The proposed solution sets up a multi-stage pipeline:

    • Generating and maintaining a separate “preview scaffold” project in .dart_tool.
    • Using that separate project as a specialized Flutter Desktop application.
    • Streaming rendered frames and user interactions over WebSockets to a web-based viewer.

    This layering of multiple components (desktop environment, web viewer, frame streaming, custom asset bundle, etc.) makes the system unusually complex. Complexity increases the risk of bugs, maintenance overhead, and reduces the predictability of future compatibility. Each added layer—especially streaming pixels and events across processes—introduces new potential points of failure and performance bottlenecks.

Below is an explanation of why this happens, followed by several approaches to fix or work around the issue.


Why This Happens

By default, GestureDetector uses HitTestBehavior.deferToChild. This means that the GestureDetector will only receive pointer events if its child reports that it hit the pointer event. A Padding widget by itself does not consider its padded space as “hit-testable” area—so taps on the space around the text are ignored by the child.

If you want the entire region (including the padding) to be tappable, you need to change the behavior to either HitTestBehavior.opaque or HitTestBehavior.translucent.

@jezell
jezell / fix.md
Created December 23, 2024 17:55
fix

Below is an example of how you could change the Flutter framework source to make GestureDetector require an explicit HitTestBehavior (or to change its default). Please note this is a breaking change and would require a carefully managed rollout to avoid breaking existing apps.


1. Locate the GestureDetector Source

In the Flutter repo, the relevant code lives in:

flutter/packages/flutter/lib/src/widgets/gesture_detector.dart
@jezell
jezell / flutter engine build workflow
Created January 15, 2025 07:28
github workflow for building flutter engine
Below is an example GitHub Actions workflow that demonstrates **one possible approach** to building multiple variants (debug, profile, release) of the Flutter Engine on Linux, Windows, and macOS.
> **Important Caveats**
> 1. Building the Flutter Engine is fairly complex and typically uses [Chromium’s build tools](https://commondatastorage.googleapis.com/chrome-infra-docs/flat/developers_guide/index.html) (gclient, GN, ninja, etc.).
> 2. The official Flutter Engine uses [LUCI](https://chromium.googlesource.com/infra/luci/luci-py) for continuous integration, not GitHub Actions.
> 3. This example is **not** guaranteed to work out of the box for all scenarios, because setting up the full environment for iOS, Android, etc. often involves extra steps (e.g., Xcode installation for iOS, or the Android NDK for Android).
> 4. For a canonical reference on how to build the Flutter Engine locally, consult the [Flutter Engine’s CONTRIBUTING.md](https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#compiling
@jezell
jezell / monorepo.md
Created January 15, 2025 08:01
Monorepo engine buidls

Below is an example GitHub Actions workflow updated for the new monorepo structure, where the former Engine repository now resides inside an engine/ folder in the main Flutter repository. This assumes you still want to build the native engine artifacts (e.g., for Linux, Windows, macOS, iOS, Android, Web) using GN + Ninja (i.e., the Chromium-based build system).

Important: The monorepo is still in flux as of this writing. The steps below might require adjustments based on the latest official instructions from the Flutter repository. The general ideas—installing depot_tools, running gclient sync, running gn gen, and then ninja—remain the same, but you may need to tweak paths and GN args.


1. Workflow Overview

  1. Check out the main Flutter repo (which contains engine/ folder).
  2. Install dependencies needed for building the engine, including [depot_tools](https://commondatastorage.googleapis.com/chrome-infra-docs/flat/depot_tools/

In Flutter, the “cursor” you see when typing into a TextField (or any other text input widget) is actually drawn (painted) by a lower-level rendering object called RenderEditable, which lives inside an EditableText widget. Here is a conceptual overview of how it works:


1. The hierarchy under the hood

  1. TextField:
    The high-level widget most developers use. It wraps lower-level widgets to handle text input, focus, styling, etc.

  2. EditableText:

name: Build Flutter Engine with Engine Tool
on:
# Run on push or pull requests, modify to your needs.
push:
branches: [ "main", "engine-builds" ]
pull_request:
branches: [ "main", "engine-builds" ]
jobs:

Overview

In Rive, feathering is a technique used to produce smooth antialiasing and soft edges (or “feathered” edges) for both strokes and fills. Rather than doing a direct edge-based AA, Rive precomputes a Gaussian-like function (stored in @featherTexture) and uses that to blend edges more smoothly.

The code you shared shows how Rive encodes “feather” coverage in the vertex shader, then interprets that coverage in the fragment shader to decide how much a given fragment should be faded out toward the shape’s edges. Below is a step-by-step explanation of how it all comes together.


1. Coverage Encoding and Classification

@jezell
jezell / flutter matrix build.yaml
Last active February 22, 2025 00:27
matrix build
name: Build Flutter Engine with Engine Tool (Matrix)
on:
push:
branches: [ "main", "engine-builds" ]
pull_request:
branches: [ "main", "engine-builds" ]
env:
# don't try to install google's internal copy of visual studio
DEPOT_TOOLS_WIN_TOOLCHAIN: 0