Welcome to the Finch Template Guide! This guide will walk you through the steps to use templates in your Finch application. Whether you're a seasoned developer or just starting, Finch offers a robust set of tools to simplify server-side web app development.

What is a Template?

A template in Finch is a file that contains the HTML structure of a page. It can also contain placeholders for data that will be filled in at runtime. Templates are used to generate HTML pages that are sent to the client.

Jinja Template Engine

Finch uses a jinja template engine for rendering views. The template system provides powerful features for creating dynamic web pages with clean separation of concerns.

Template Syntax

Finch uses a jinja template syntax for rendering views. The template syntax is similar to the jinja template syntax. Here is an example of how to use it:

{{ variable }}           <!-- Basic variable output -->
{{ object.property }}    <!-- Access object properties -->

for more information about the template syntax please refer to the Jinja Template Engine documentation.

or follow the Jinja Package Dart documentation.

A basic example of a template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
</head>
<body>
  <h1>{{ heading }}</h1>
  <p>{{ content }}</p>
  {% for item in items %}
    <p>{{ item }}</p>
  {% endfor %}
</body>
</html>

How can add custom event functions to the template (jinja)?

You can add custom event functions to the template by using the Request.localEvents map. This map contains all the custom event functions that you can use in your templates. For example, if you want to add a function that returns the current year, you can do it like this:


final localEvents = {
  'currentYear': () => DateTime.now().year,
};

Request.localEvents.addAll(localEvents);

and then you can use it in your template like this:

<p>The current year is {{ $l.currentYear() }}</p>

How can add custom filters to the template (jinja)?


final localLayoutFilters = {
  'customDate': (value) => DateFormat('yyyy-MM-dd').format(value),
};

Request.addLocalLayoutFilters(localLayoutFilters);

and then you can use it in your template like this:

<p>{{ date | customDate }}</p>
Edit this page
HTTP Requests Guide
Welcome to the Finch HTTP Requests Guide! This guide will walk you through the steps to handle HTTP requests in your Finch application. Whether you're a seasoned developer or just starting, Finch offers a robust set of tools to simplify server-side web app development.
FinchTemplateEvents