[flutter_markdown] Relative anchors

[gazreese]

Migrated from flutter/flutter#81777
This issue was originally filed against the official flutter_markdown package.
The package has since been discontinued and ownership transferred to flutter_markdown_plus.

---

Is the functionality for relative anchors planned?

For example

[preface](#preface)
[development](#development)

When tapping one of these, the view would scroll to the location of the #preface element.

[gazreese]

@namiwang commented on 2019-09-16T06:58:44Z (migrated from flutter/flutter#81777)

---

We're trying to implement this feature.

Currently, flutter's ListView only supports scroll to an offset, so you can't scroll to element, by index, etc. (flutter/flutter#12319)

You have to visit all the anchors, calc the offset, and handle the links manually.

[gazreese]

@ekuleshov commented on 2020-04-21T23:58:39Z (migrated from flutter/flutter#81777)

---

There is ScrollablePositionedList widget. Could it be used instead to scroll to internal anchors?

[gazreese]

@TahaTesser commented on 2021-09-02T11:47:08Z (migrated from flutter/flutter#81777)

---

Hi @lifenautjoe
Looks like relative anchors are not rendered at all, thanks for filing the issue.

minimal code sample

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import '../shared/markdown_demo_widget.dart';

// ignore_for_file: public_member_api_docs

const String _data = '''
# Minimal Markdown Test
---
This is a simple Markdown test. Provide a text string with Markdown tags
to the Markdown widget and it will display the formatted output in a scrollable
widget.

## Section 1
Maecenas eget **arcu egestas**, mollis ex vitae, posuere magna. Nunc eget
 aliquam tortor. Vestibulum porta sodales efficitur. Mauris interdum turpis
 eget est condimentum, vitae porttitor diam ornare.

### Subsection A
Sed et massa finibus, blandit massa vel, vulputate velit. Vestibulum vitae
venenatis libero. ***Curabitur sem lectus, feugiat eu justo in, eleifend
accumsan ante.*** Sed a fermentum elit. Curabitur sodales metus id mi ornare,
in ullamcorper magna congue.
''';

const String _notes = """
# Minimal Markdown Demo
---

## Overview

The simplest use case that illustrates how to make use of the
flutter_markdown package is to include a Markdown widget in a widget tree
and supply it with a character string of text containing Markdown formatting
syntax. Here is a simple Flutter app that creates a Markdown widget that
formats and displays the text in the string _markdownData. The resulting
Flutter app demonstrates the use of headers, rules, and emphasis text from
plain text Markdown syntax.

## Usage

The code sample below demonstrates a simple Flutter app with a Markdown widget.

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

const String _markdownData = """

Minimal Markdown Test

Section1
[Subsection A](#Subsection A)

---

This is a simple Markdown test. Provide a text string with Markdown tags
to the Markdown widget and it will display the formatted output in a
scrollable widget.

Section 1

Maecenas eget arcu egestas, mollis ex vitae, posuere magna. Nunc eget
aliquam tortor. Vestibulum porta sodales efficitur. Mauris interdum turpis
eget est condimentum, vitae porttitor diam ornare.

Subsection A

Sed et massa finibus, blandit massa vel, vulputate velit. Vestibulum vitae
venenatis libero. Curabitur sem lectus, feugiat eu justo in, eleifend
accumsan ante. Sed a fermentum elit. Curabitur sodales metus id mi
ornare, in ullamcorper magna congue.
""";

void main() {
runApp(
MaterialApp(
title: "Markdown Demo",
home: Scaffold(
appBar: AppBar(
title: const Text('Simple Markdown Demo'),
),
body: SafeArea(
child: Markdown(
data: _markdownData,
),
),
),
),
);
}

""";

class MinimalMarkdownDemo extends StatelessWidget
    implements MarkdownDemoWidget {
  const MinimalMarkdownDemo({Key? key}) : super(key: key);

  static const String _title = 'Minimal Markdown Demo';

  @override
  String get title => MinimalMarkdownDemo._title;

  @override
  String get description => 'A minimal example of how to use the Markdown '
      'widget in a Flutter app.';

  @override
  Future<String> get data => Future<String>.value(_data);

  @override
  Future<String> get notes => Future<String>.value(_notes);

  @override
  Widget build(BuildContext context) {
    return const Markdown(
      data: _data,
    );
  }
}

stable	master
❗️	❗️

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on macOS 12.0 21A5506j darwin-x64, locale en-GB)
    • Flutter version 2.2.3 at /Users/tahatesser/Code/flutter_stable
    • Framework revision f4abaa0735 (9 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Code/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Temurin-11.0.12+7 (build 11.0.12+7)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • Xcode 13.0, Build version 13A5212g
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2020.3)
    • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7621141/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] VS Code (version 1.59.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.25.0

[✓] Connected device (3 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • macOS (desktop)         • macos         • darwin-x64     • macOS 12.0 21A5506j darwin-x64
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 92.0.4515.159

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.6.0-1.0.pre.161, on macOS 12.0 21A5506j darwin-x64, locale en-GB)
    • Flutter version 2.6.0-1.0.pre.161 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 334c95dbd9 (5 hours ago), 2021-09-02 08:46:27 +0200
    • Engine revision d877a4bbcd
    • Dart version 2.15.0 (build 2.15.0-68.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7621141/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7621141/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] Android Studio (version 2020.3)
    • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7583922/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.59.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.25.0

[✓] Connected device (3 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • macOS (desktop)         • macos         • darwin-x64     • macOS 12.0 21A5506j darwin-x64
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 92.0.4515.159

• No issues found!

✅: No Issue ❗️: Issue reproduced

[gazreese]

@Jonas-Sander commented on 2022-01-14T01:24:56Z (migrated from flutter/flutter#81777)

---

My use case:

I personally want to render a privacy policy document with a table of contents.
As a privacy policy is unfortunately often very big a it is important for users to be able to skip to specific sections if they e.g. need to look up specific information again.

Additionally I want the table of content to be displayed at the left-hand side of the page.
If I click on one of the headings the main content should scroll to the right heading.
Like in the picture below the currently "active" header should be highlighted in blue.

See the Screenshot of the Google privacy policy:

This means I need a way to

• scroll to specific relative anchors from outside of the Markdown widget
• retreive what elements/sections/anchors are currently shown to the user (I guess, maybe there is a smarter way)

I don't know what of my use case is in-scope of the ticket.

If there is some way I can help to implement this ticket let me know :)
Also if anyone has tips for implementing the stuff (table of content on the side) I mentioned above also let me know ;)

[gazreese]

@Jonas-Sander commented on 2022-01-15T02:06:58Z (migrated from flutter/flutter#81777)

---

@stuartmorgan Will this not be addressed as this is P6 ("unlikely to be addressed")? Or was this a mistake (should be P4/P5)?
I guess this is part of a normal markdown implementation - I wouldn't know why this should not be fixed.

[gazreese]

@stuartmorgan-g commented on 2022-01-15T12:47:14Z (migrated from flutter/flutter#81777)

---

It should be P5; I was looking at the wrong variant of header IDs.

[gazreese]

@stuartmorgan-g commented on 2022-01-15T12:48:02Z (migrated from flutter/flutter#81777)

---

If there is some way I can help to implement this ticket let me know :)

Anyone is welcome to submit PRs for issues.

[gazreese]

@leo-ger commented on 2024-02-20T10:40:30Z (migrated from flutter/flutter#81777)

---

This would be very neat to have, is this going to be addressed any time soon? It's been almost 5 years...

[gazreese]

@github-actions commented on 2025-07-23T14:03:12Z (migrated from flutter/flutter#81777)

---

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.