https://github.com/dariomatias-dev/flutter_syntax_highlighter
A widget for syntax highlighting of Dart and Flutter code, with support for light and dark themes, line numbers, and code selection.
https://github.com/dariomatias-dev/flutter_syntax_highlighter
dart flutter package pubdev
Last synced: 6 months ago
JSON representation
A widget for syntax highlighting of Dart and Flutter code, with support for light and dark themes, line numbers, and code selection.
- Host: GitHub
- URL: https://github.com/dariomatias-dev/flutter_syntax_highlighter
- Owner: dariomatias-dev
- License: mit
- Created: 2025-07-16T23:01:41.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-07-18T18:47:59.000Z (7 months ago)
- Last Synced: 2025-07-18T23:26:17.136Z (7 months ago)
- Topics: dart, flutter, package, pubdev
- Language: C++
- Homepage: https://pub.dev/packages/flutter_syntax_highlighter
- Size: 46.4 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Flutter Syntax Highlighter
A widget for syntax highlighting of Dart and Flutter code, with support for light and dark themes, line numbers, and code selection.
### Screenshots

## Installation
Run this command:
```bash
flutter pub add flutter_syntax_highlighter
```
## Usage Example
```dart
import 'package:flutter/material.dart';
import 'package:flutter_syntax_highlighter/flutter_syntax_highlighter.dart';
void main() {
runApp(const MyApp());
}
const String sampleCode = '''
import 'package:flutter/material.dart';
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State createState() => _CounterPageState();
}
class _CounterPageState extends State {
int _count = 0;
void _increment() {
setState(() {
_count++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Counter'),
),
body: Center(
child: Text(
'Count: $_count',
style: Theme.of(context).textTheme.headlineMedium,
),
),
floatingActionButton: FloatingActionButton(
onPressed: _increment,
child: const Icon(Icons.add),
),
);
}
}
''';
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State createState() => _MyAppState();
}
class _MyAppState extends State {
bool _isDarkMode = false;
bool _showLineNumbers = true;
bool _enableCodeSelection = true;
void _toggleTheme() {
setState(() {
_isDarkMode = !_isDarkMode;
});
}
void _toggleLineNumbers() {
setState(() {
_showLineNumbers = !_showLineNumbers;
});
}
void _toggleCodeSelection() {
setState(() {
_enableCodeSelection = !_enableCodeSelection;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Syntax Highlighter',
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: _isDarkMode ? ThemeMode.dark : ThemeMode.light,
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Syntax Highlighter'),
actions: [
IconButton(
icon: Icon(_isDarkMode ? Icons.light_mode : Icons.dark_mode),
onPressed: _toggleTheme,
tooltip: 'Toggle Theme',
),
],
),
body: SafeArea(
child: Column(
children: [
SwitchListTile(
title: const Text('Show Line Numbers'),
value: _showLineNumbers,
onChanged: (value) => _toggleLineNumbers(),
),
SwitchListTile(
title: const Text('Enable Code Selection'),
value: _enableCodeSelection,
onChanged: (value) => _toggleCodeSelection(),
),
SizedBox(height: 12.0),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: SyntaxHighlighter(
code: sampleCode,
isDarkMode: _isDarkMode,
showLineNumbers: _showLineNumbers,
enableCodeSelection: _enableCodeSelection,
),
),
),
),
],
),
),
),
);
}
}
```
## Properties
| Property | Type | Description |
| --------------------- | -------- | ------------------------------------------- |
| `code` | `String` | Source code to be displayed. |
| `isDarkMode` | `bool` | Enables dark theme for syntax highlighting. |
| `showLineNumbers` | `bool` | Displays line numbers next to the code. |
| `enableCodeSelection` | `bool` | Allows selection of the displayed text. |
## License
This project is licensed under the [MIT License](LICENSE).
# Author
This Flutter package was developed by [Dário Matias](https://github.com/dariomatias-dev).
# Donations
Help maintain the project with donations.
[](https://www.buymeacoffee.com/dariomatias)