Vyuh Document

Pages, headers and footers ​

You will add physical pages, a header and a footer, a live page number, and a footnote.

Packages ​

yaml
dependencies:
  vyuh_document_extension_field:
    hosted: https://pub.vyuh.tech
    version: ^0.19.3
sh
flutter pub add vyuh_document_extension_field --hosted-url https://pub.vyuh.tech

Fields, footnotes, endnotes, bookmarks and form fields come from the field package.

The code ​

dart
import 'package:vyuh_document_editor/vyuh_document_editor.dart';
import 'package:vyuh_document_extension_field/vyuh_document_extension_field.dart';

/// The full starter set on physical pages, with a page-number footer.
DocumentEditorController createPagedEditor() => DocumentEditorController(
  // layoutMode defaults to DocumentEditorLayoutMode.paginated.
  // extensions default to DocumentExtension.defaults.
  document: Document(
    metadata: const DocumentMetadata(title: 'Handbook'),
    sections: [
      DocumentSection(
        id: 'main',
        format: SectionFormat(
          header: PageHeaderFooter(
            blocks: [ParagraphBlock.text('Employee handbook', id: 'header')],
          ),
          footer: PageHeaderFooter(
            blocks: [ParagraphBlock.text('Page ', id: 'footer')],
          ),
        ),
        blocks: [ParagraphBlock.text('Welcome aboard.', id: 'intro')],
      ),
    ],
  ),
);

/// Puts the caret in the footer story and appends a live page number.
void addPageNumber(DocumentEditorController controller) {
  controller.focusPageRegion(sectionIndex: 0, region: PageRegionKind.footer);
  controller.moveCaretToLineEnd();
  controller.insertStandardInlineField(StandardInlineFields.pageNumber);
}

/// Footnotes are stories of their own, numbered by layout.
void addFootnote(DocumentEditorController controller) {
  controller.insertFootnote(
    blocks: [ParagraphBlock.text('Updated every quarter.', id: 'note-1')],
  );
}

Mount it with DocumentEditor(controller: createPagedEditor()). You see pages with "Employee handbook" at the top and "Page 1", "Page 2" ... at the bottom once addPageNumber has run.

How pages work ​

Anatomy of a page A page has margins around its body. The header sits in the top margin and the footer in the bottom margin; both are stories of blocks. The body flows in columns, and footnotes sit at the bottom of the body. A section can give its first page and its even pages their own header and footer, and every other page uses the default header and footer. All of these live on SectionFormat. Employee handbook Page 2 Header a story of blocks Margins PageMargins Body in columns SectionColumns Footnotes bottom of the body Footer a story of blocks HEADER AND FOOTER VARIANTS First page firstPageHeader firstPageFooter when differentFirstPage Even pages evenPageHeader evenPageFooter when odd and even pages differ Every other page header footer the default stories All six are fields of SectionFormat.
Anatomy of a page
ConceptAPI
Paged or pagelesslayoutMode: on the controller: DocumentEditorLayoutMode.paginated (default) or .pageless. Choose before mounting.
Page size, margins, columnsSectionFormat on each DocumentSection, or controller.setSectionFormat(index, format)
Header and footerSectionFormat(header:, footer:, firstPageHeader:, evenPageHeader: ...) holding PageHeaderFooter stories
Edit a header or footercontroller.focusPageRegion(sectionIndex:, region: PageRegionKind.header)
BreaksinsertPageBreak(), insertColumnBreak(), insertSectionBreak()
FieldsinsertStandardInlineField(StandardInlineFields.pageNumber), .pageCount, .currentDate, ...
NotesinsertFootnote(blocks:), insertEndnote(blocks:)

Pages come from the content; you never address a page. Layout recomputes them after every edit, and PDF export paints the same pages. Headers, footers, footnotes, page fields and multiple sections belong to the paged layout.

Next ​

Step 5: review and comments.