The Text component renders a plain text node in the DOM with no additional HTML elements or styling.
Basic Usage
import 'package:jaspr/jaspr.dart';
// Using the factory constructor
Component.text('Hello, World!')
API Reference
The text content to render.
Optional key for component identity and state preservation.
Examples
Simple Text
class Greeting extends StatelessComponent {
@override
Component build(BuildContext context) {
return Component.text('Welcome to Jaspr!');
}
}
Text in HTML Elements
Text components are typically used as children of HTML elements:
import 'package:jaspr/html.dart';
div([
Component.text('This is plain text'),
])
p([
Component.text('A paragraph of text'),
])
span([
Component.text('Inline text'),
])
Multiple Text Nodes
p([
Component.text('Hello '),
strong([Component.text('World')]),
Component.text('!'),
])
<p>Hello <strong>World</strong>!</p>
Dynamic Text
class Counter extends StatefulComponent {
@override
State<Counter> createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int count = 0;
@override
Component build(BuildContext context) {
return div([
Component.text('Count: $count'),
button(
[Component.text('Increment')],
onClick: () => setState(() => count++),
),
]);
}
}
Text Styling
Text components inherit styling from their parent elements. Use HTML elements or inline styles to control text appearance:
// Using semantic HTML
strong([Component.text('Bold text')])
em([Component.text('Italic text')])
code([Component.text('Code text')])
// Using inline styles
span(
[Component.text('Styled text')],
styles: Styles(
color: Colors.blue,
fontSize: 18.px,
fontWeight: FontWeight.bold,
),
)
Text Escaping
The Text component automatically escapes HTML entities for security:
Component.text('<script>alert("XSS")</script>')
// Renders as escaped text: <script>alert("XSS")</script>
Whitespace Handling
Whitespace in text content follows standard HTML rules:
Component.text('Multiple spaces collapse')
// Renders with single spaces
Component.text('Line\nbreaks\nare\nignored')
// Renders on a single line
// To preserve whitespace:
pre([Component.text('Preserved \n whitespace')])
- Text components are lightweight and optimized for rendering performance
- Text updates only re-render when the text content changes
- String interpolation in text is computed during build and doesn’t create reactivity
Common Patterns
Conditional Text
Component.text(isLoggedIn ? 'Welcome back!' : 'Please log in')
Formatted Text
Component.text('Price: \$${price.toStringAsFixed(2)}')
Empty Text
// For truly empty content, use Component.empty() instead
Component.empty()
- Fragment - Render multiple components without a wrapper
- RawText - Render unescaped HTML (use with caution)
- Text HTML Elements - Semantic text elements (b, i, strong, etc.)
Type Definition
/// Represents a plain text node with no additional properties.
///
/// Styling is done through the parent element(s) and their styles.
class Text extends Component {
const Text._(this.text, {super.key});
final String text;
@override
Element createElement() => TextElement(this);
}