Build Blogger XML Themes with Dart

Introducing blogger_theme: Build Blogger XML Themes with Dart

If you have ever tried building or customizing a Blogger (Blogspot) theme from scratch, you know the struggle. Managing massive, unstructured XML files and mixing standard HTML with Blogger's proprietary tags quickly devolves into a frustrating maintenance nightmare.

Enter blogger_theme—a robust Dart package designed to bring structure, strict type safety, and a modern component-based architecture to Blogger theme development. Instead of wrestling with raw XML syntax and chasing down missing closing tags, you can now write your entire layout in clean, declarative Dart code and compile it directly into a fully compliant Blogger XML theme.

Why Choose blogger_theme?

• Component-Based Architecture: Break your complex layouts down into modular, reusable components, bringing the clean developer experience (DX) of modern frameworks like Flutter or React straight to Blogger.
• Type-Safe Blogger Tags: Catch missing attributes and structural syntax errors at compile-time rather than upload-time. Use native Dart classes for elements like BSection, BWidget, BIf, and BData.
• Built-in Client Scripting: Seamlessly compile and embed local Dart client scripts directly into inline JavaScript to handle frontend interactivity effortlessly.

---

Getting Started & Core Example

Here is a practical, production-ready example. This snippet demonstrates how to set up a layout framework, apply responsive theme attributes, inject global CSS, and isolate specific post views using conditional rendering.

import 'dart:io';
import 'package:blogger_theme/blogger_theme.dart';

class BlogLayout extends Component {
  const BlogLayout();

  @override
  Iterable<Component> build() => [
    Div(
      attributes: {'class': 'wrapper-pane'},
      children: [
        BSection(
          id: 'header-area',
          className: 'header-section',
          maxwidgets: 1,
          showaddelement: true,
          children: [
            BWidget(
              id: 'Header1',
              type: 'Header',
              title: 'Blog Header Title',
              locked: true,
            ),
          ],
        ),
        
        // Renders content exclusively on individual post pages
        BIf(
          cond: 'data:view.isPost',
          children: [
            Div(
              attributes: {'class': 'post-item'},
              children: [BData(value: 'post.body')],
            ),
          ],
        ),
      ],
    ),
  ];
}

void main() {
  final theme = BloggerTheme(
    attributes: {
      'b:responsive': 'true',
      'b:defaultwidgetversion': '2',
      'b:layoutsversion': '3',
    },
    head: [
      Title(children: [Text('Generated Blogger Theme')]),
      BSkin('body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }'),
    ],
    body: [
      const BlogLayout(),
      // Optional: Compile a local Dart client script into inline JavaScript:
      // const BClientScript('web/interactivity.dart'),
    ],
  );

  final xml = theme.generate();
  
  // Export the compiled XML configuration
  final outputFile = File('build/blogger_theme.xml');
  outputFile.createSync(recursive: true);
  outputFile.writeAsStringSync(xml);

  print('Success! Wrote generated theme to ${outputFile.path}');
}

---

Under the Hood: Code Breakdown

• BSection & BWidget: These classes map directly to Blogger's native <b:section> and <b:widget> elements. They establish structured drop-zones where custom widgets can be dynamically added or locked down inside the Blogger Layout Editor.
• BIf (Conditional Rendering): Emulates Blogger's conditional evaluators (<b:if cond="...">). In the example above, it targets data:view.isPost to ensure the post body markup is only delivered when a user visits an individual article page.
• BloggerTheme.generate(): The engine core. It parses your declarative Dart object tree, injects standard boilerplate XML schemas and namespaces, and formats everything into a clean, valid XML string ready to upload.

---

💡 Advanced Concept: Handling Loops and Arrays

Displaying indexes, main feeds, and comment threads requires looping through data streams. You can implement sequential loops cleanly by embedding loop structures inside your layout tree:

// Example layout fragment for a post feed loop
BLoop(
  values: 'data:posts',
  varName: 'post',
  children: [
    Article(
      attributes: {'class': 'feed-summary'},
      children: [
        H2(children: [BData(value: 'post.title')]),
        Span(children: [BData(value: 'post.date')]),
      ],
    ),
  ],
)

By shifting your theme infrastructure to blogger_theme, you instantly modernize your development pipeline, leverage Dart's static analysis to prevent broken templates, and keep your underlying codebase organized and maintainable.

Ready to transform your workflow? Explore the full documentation, check out the API details, and install the package today via pub.dev/packages/blogger_theme.