tagflow 0.0.1-dev.14 copy "tagflow: ^0.0.1-dev.14" to clipboard
tagflow: ^0.0.1-dev.14 copied to clipboard

Transform HTML markup into native Flutter widgets with an elegant, customizable converter.

pub package codecov style: very good analysis

⚠️ IMPORTANT: This package is currently undergoing a complete rewrite. For a stable version, please check out the stable branch.

🚧 Alpha Release: This package is in active development. APIs may change frequently. For production use, please wait for v1.0.0.

🌊 tagflow #

Transform HTML markup into native Flutter widgets with an elegant, customizable converter. Supports rich text formatting, lists, code blocks, and blockquotes with extensive styling options.

✨ Features #

  • 🎯 Convert HTML to native Flutter widgets
  • 🎨 Extensive styling customization
  • 📱 Responsive and adaptive layouts
  • 🔌 Plugin architecture for custom elements
  • 🎭 Theme support with dark mode
  • 🧩 Modular and extensible design

Feature Highlights #

🚀 Simple Integration

class MyHtmlWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Tagflow(
      html: '<div>Hello, Flutter!</div>',
    );
  }
}

🎨 Material Design Integration

Tagflow(
  html: htmlContent,
  theme: TagflowTheme.fromTheme(
    Theme.of(context),
    headingConfig: TagflowHeadingConfig(
      baseSize: 16.0,
      scales: [2.5, 2.0, 1.75, 1.5, 1.25, 1.0],
    ),
  ),
)

📝 Article-Optimized Theme

Tagflow(
  html: articleContent,
  theme: TagflowTheme.article(
    baseTextStyle: Theme.of(context).textTheme.bodyMedium!,
    headingTextStyle: Theme.of(context).textTheme.headlineMedium!,
    codeTextStyle: GoogleFonts.spaceMonoTextTheme(context).bodyMedium,
    codeBackground: Theme.of(context).colorScheme.surfaceContainerHigh,
  ),
)

🎯 CSS-like Styling

<div
  style="
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background-color: var(--surface-container);
    border-radius: 8px;
  "
>
  <h1
    style="
      color: var(--on-surface);
      font-size: 2rem;
      margin: 0;
    "
  >
    Material Design
  </h1>
  <p class="highlight">Seamlessly integrates with your app's theme</p>
</div>

Installation #

Add tagflow to your pubspec.yaml:

dependencies:
  tagflow: ^0.0.1-dev.6

Supported Features #

  • 📝 Rich Text Elements

    • Headings (h1-h6)
    • Paragraphs
    • Lists (ordered and unordered)
    • Blockquotes
    • Code blocks
    • Inline formatting (bold, italic, underline)
  • 🎨 Styling

    • Material Design integration
    • Custom themes
    • CSS-like style attributes
    • Flexbox layout support
    • Responsive design
  • 🔗 Interactive Elements

    • Clickable links
    • Selectable text
    • Custom tap callbacks

Theme System #

Tagflow's theme system seamlessly integrates with Flutter's Material Design while providing powerful customization options:

  • 🎨 Material Integration: Automatically uses your app's theme colors and typography
  • 🔧 Custom Styling: Define styles for specific HTML elements and CSS classes
  • 📏 Responsive Units: Supports rem, em, and percentage-based units
  • 🎯 CSS Features: Flexbox layout, borders, shadows, and more
  • 🌈 Color System: Use theme colors or define custom color palettes

Theme Configuration #

// Use Material Theme
TagflowTheme.fromTheme(
  Theme.of(context),
  spacingConfig: TagflowSpacingConfig(
    baseSize: 16.0,
    scale: 1.2,
  ),
)

// Article Theme
TagflowTheme.article(
  baseTextStyle: Theme.of(context).textTheme.bodyMedium!,
  headingTextStyle: Theme.of(context).textTheme.headlineMedium!,
  maxWidth: 800,
  baseFontSize: 18.0,
)

Documentation #

Visit our documentation for detailed guides and examples.

Contributing #

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

1
likes
150
points
424
downloads

Publisher

verified publisheraryak.dev

Weekly Downloads

Transform HTML markup into native Flutter widgets with an elegant, customizable converter.

Homepage
Repository (GitHub)
View/report issues
Contributing

Documentation

API reference

License

MIT (license)

Dependencies

collection, equatable, flutter, html, meta

More

Packages that depend on tagflow