animated_streaming_markdown 0.2.2

Flutter markdown streaming package for Android/iOS/macOS/Linux/Windows (web is not supported).

animated_streaming_markdown

Streaming Markdown parser + renderer for Flutter, optimized for incremental append flows.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

animated_streaming_markdown provides 2 main layers:

• Parser: StreamingMarkdownParseWorker for incremental set/append requests
• Renderer: StreamingMarkdownRenderView for block rendering + token arrival animations

It is designed for chat-like or streaming text interfaces where markdown arrives progressively and needs stable UI updates.

(back to top)

Built With

• 
• 
• 

(back to top)

Getting Started

Prerequisites

• Flutter >=3.0.0
• Dart SDK >=2.17.0 <4.0.0
• Native toolchain for your target platform (Android/iOS/macOS/Linux/Windows)

Installation

1. Add dependency:

   dependencies:
     animated_streaming_markdown: ^0.2.0
   

2. Install packages:

   flutter pub get
   

(back to top)

Usage

1) Start parser worker and stream markdown

final worker = StreamingMarkdownParseWorker();
await worker.start();

final setResult = await worker.request(
  op: 'set',
  text: '# Hello',
  includeNodes: true,
);

final appendResult = await worker.request(
  op: 'append',
  text: '\n\nStreaming **markdown** chunk...',
  includeNodes: true,
);

2) Render nodes with StreamingMarkdownRenderView

StreamingMarkdownRenderView(
  nodes: appendResult.renderNodes,
  sliver: true,
  tokenArrivalDelay: const Duration(milliseconds: 180),
  tokenFadeInDuration: const Duration(milliseconds: 240),
  enableTextSelection: true,
  tokenAnimationBuilder: (
    BuildContext context,
    StreamingMarkdownAnimatedToken token,
  ) {
    final t = Curves.easeOutCubic.transform(token.value);
    return Transform.translate(
      offset: Offset(0, (1 - t) * 8),
      child: Opacity(opacity: t, child: token.child),
    );
  },
);

3) Important APIs

• StreamingMarkdownParseWorker.start()
• StreamingMarkdownParseWorker.request(op, text, includeNodes)
• StreamingMarkdownParseWorker.dispose()
• StreamingMarkdownRenderView(...)
  • nodes
  • sliver
  • tokenArrivalDelay
  • tokenFadeInDuration / tokenFadeInRelativeToDelay
  • tokenAnimationBuilder
  • onTokenArrivalWait
  • enableTextSelection
  • customBlockBuilder

For a complete integration sample, check example/lib/markdown_cases_demo.dart.

(back to top)

Roadmap

• ✅ Incremental parser worker (set / append)
• ✅ Streaming renderer for markdown block nodes
• ✅ Per-token custom animation builder API
• ✅ Example with multiple animation presets
• ❌ More parser/renderer benchmark scenarios

See the open issues for proposed features and known issues.

(back to top)

Contributing

Contributions are welcome.

1. Fork the project
2. Create your branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m "Add your feature")
4. Push branch (git push origin feature/your-feature)
5. Open a Pull Request

(back to top)

License

Distributed under the Apache-2.0 License. See LICENSE for details.

(back to top)

Contact

• Repository: https://github.com/samnn152/streaming-markdown
• Issues: https://github.com/samnn152/streaming-markdown/issues

(back to top)

Acknowledgments

• Tree-sitter
• tree-sitter-markdown
• Flutter

(back to top)