view method
Renders the current model state for display.
This method is called after every update to refresh the screen. It should return either a String or a View object.
Guidelines
- Keep view functions pure - no side effects
- View should only depend on model state
- Use string interpolation or StringBuffer for complex views
- Consider terminal width/height for responsive layouts
Example
@override
String view() {
final buffer = StringBuffer();
// Header
buffer.writeln('╔════════════════════════════╗');
buffer.writeln('║ My Application ║');
buffer.writeln('╚════════════════════════════╝');
buffer.writeln();
// Content
if (loading) {
buffer.writeln('Loading...');
} else {
for (final item in items) {
final prefix = item == selectedItem ? '▸ ' : ' ';
buffer.writeln('$prefix$item');
}
}
buffer.writeln();
// Footer
buffer.writeln('↑/↓: Navigate Enter: Select q: Quit');
return buffer.toString();
}
Implementation
@override
String view() {
final buffer = StringBuffer();
// Prompt and input
buffer.write(_promptStyle.render(prompt));
buffer.write(_textStyle.render(prompt.isNotEmpty ? ' ' : ''));
final displayValue = _value.isNotEmpty ? _value : placeholder;
final valueStyle = _value.isNotEmpty ? _textStyle : _placeholderStyle;
buffer.write(valueStyle.render(displayValue));
// Suggestions
if (_filteredSuggestions.isNotEmpty) {
buffer.writeln();
for (var i = 0; i < _filteredSuggestions.length; i++) {
if (i == _selectedIndex) {
buffer.write(' ');
buffer.write(_selectedSuggestionStyle.render(config.pointer));
buffer.write(' ');
buffer.write(
_selectedSuggestionStyle.render(_filteredSuggestions[i]),
);
} else {
buffer.write(' ');
buffer.write(_suggestionStyle.render(_filteredSuggestions[i]));
}
if (i < _filteredSuggestions.length - 1) {
buffer.writeln();
}
}
}
return buffer.toString();
}