example/example.md

Example #

flutter_html 3.0.0 has no flex layout. Its CSS parser maps display: flex to display: inline, so a flex container renders as inline text. There is no error and no warning. This extension replaces the container's build and lays the children out.

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_css_flex/flutter_html_css_flex.dart';

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Html(
            data: '''
              <div style="display: flex; gap: 16px; align-items: center;
                          padding: 12px; background-color: #f1f3f5;">
                <div style="flex: 0 0 120px; background-color: #dee2e6;">
                  Sidebar
                </div>
                <div style="flex-grow: 1;">Body, taking the rest of the row.</div>
              </div>

              <div style="display: flex; flex-direction: column; row-gap: 8px;
                          padding: 12px;">
                <div>Stacked one</div>
                <div>Stacked two</div>
              </div>

              <div style="display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;">
                <span style="background-color: #e7f5ff;">One</span>
                <span style="background-color: #e7f5ff;">Two</span>
                <span style="background-color: #e7f5ff;">Three</span>
              </div>
            ''',
            extensions: const [CssFlexHtmlExtension()],
          ),
        ),
      );
}

void main() => runApp(const ExampleApp());

A grid container #

display: grid and display: inline-grid build a column of rows. Items fill the grid row by row. The extension reads grid-template-columns with <length>, <flex> and auto tracks, and repeat() around them.

Html(
  data: '''
    <div style="display: grid; grid-template-columns: repeat(2, 1fr);
                gap: 8px; padding: 12px;">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
    </div>
  ''',
  extensions: const [CssFlexHtmlExtension()],
);

Row templates, item placement, spans and minmax() are not read. The limitations have the full grid list.