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: 16 days 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 (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-24T18:15:27.000Z (9 months ago)
- Last Synced: 2026-04-08T23:16:36.735Z (about 1 month ago)
- Topics: dart, flutter, package, pubdev
- Language: Dart
- Homepage: https://pub.dev/packages/flutter_syntax_highlighter
- Size: 60.8 MB
- Stars: 2
- 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.
Explore the docs »
View on pub.dev
·
Report Bug
·
Request Feature
## Table of Contents
- [About The Project](#about-the-project)
- [Features](#features)
- [Built With](#built-with)
- [Screenshots](#screenshots)
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Basic Usage](#basic-usage)
- [Using Custom Themes](#using-custom-themes)
- [Properties](#properties)
- [Contributing](#contributing)
- [License](#license)
- [Author](#author)
## About The Project
Flutter Syntax Highlighter is a widget designed to display Dart and Flutter code blocks cleanly and legibly within a Flutter application. It formats the code with appropriate colors and styles, simulating the appearance of a professional code editor.
The package supports multiple themes, both light and dark, and allows for customizations such as displaying line numbers and enabling text selection, making it ideal for tutorials, documentation, or any app that needs to present source code elegantly.
## Features
- **Syntax Highlighting:** Automatically formats Dart and Flutter code.
- **Multiple Themes:** Includes a vast collection of popular themes like Dracula, Nord, Atom One, GitHub, and VSCode.
- **Customizable Themes:** Define your own color schemes by extending the `SyntaxColorSchema` class.
- **Light and Dark Mode:** Adapts syntax highlighting based on the application's theme.
- **Line Numbers:** Option to show or hide line numbers next to the code.
- **Code Selection:** Allows users to select and copy text from the code block.
- **Easy to Use:** Simple integration with a single widget.
## Built With
- **[Flutter](https://flutter.dev/)** – A UI toolkit by Google for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
- **[Dart](https://dart.dev/)** – The programming language used for Flutter, optimized for building fast apps on any platform.
## Screenshots
Below you can find previews for all the themes provided by the package:
| Theme 1 | Theme 2 | Theme 3 |
|---------|---------|---------|
| 
| 
| 
|
| **A11y Light** | **A11y Dark** | **Android Studio Light** |
| Theme 4 | Theme 5 | Theme 6 |
|---------|---------|---------|
| 
| 
| 
|
| **Android Studio Dark** | **Atom One Light** | **Atom One Dark** |
| Theme 7 | Theme 8 | Theme 9 |
|---------|---------|---------|
| 
| 
| 
|
| **Cobalt2** | **Dark High Contrast** | **Dracula** |
| Theme 10 | Theme 11 | Theme 12 |
|----------|----------|----------|
| 
| 
| 
|
| **GitHub Light** | **GitHub Dark** | **Light High Contrast** |
| Theme 13 | Theme 14 | Theme 15 |
|----------|----------|----------|
| 
| 
| 
|
| **Material Oceanic** | **Monokai** | **Night Owl** |
| Theme 16 | Theme 17 | Theme 18 |
|----------|----------|----------|
| 
| 
| 
|
| **Nord** | **One Dark Pro** | **Panda Syntax** |
| Theme 19 | Theme 20 | Theme 21 |
|----------|----------|----------|
| 
| 
| 
|
| **Solarized Light** | **Solarized Dark** | **StackOverflow Light** |
| Theme 22 | Theme 23 | Theme 24 |
|----------|----------|----------|
| 
| 
| 
|
| **StackOverflow Dark** | **SynthWave84** | **VSCode Light** |
| Theme 25 | Theme 26 | Theme 27 |
|----------|----------|----------|
| 
| 
| 
|
| **VSCode Dark** | **Xcode Light** | **Xcode Dark** |
## Getting Started
To install the package, run the following command in your project terminal:
```bash
flutter pub add flutter_syntax_highlighter
```
## Usage
### Basic Usage
```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,
),
),
),
),
],
),
),
),
);
}
}
```
### Using Custom Themes
```dart
import 'package:flutter/material.dart';
import 'package:flutter_syntax_highlighter/flutter_syntax_highlighter.dart';
void main() {
runApp(const MyApp());
}
class MyLightSyntaxTheme extends SyntaxColorSchema {
const MyLightSyntaxTheme()
: super(
baseStyle: const Color(0xFF2B2B2B),
lineNumberStyle: const Color(0xFFAAAAAA),
keywordStyle: const Color(0xFF8959A8),
specialKeywordStyle: const Color(0xFFAA5DCD),
storageModifierStyle: const Color(0xFFAA5DCD),
typeStyle: const Color(0xFF3E999F),
functionStyle: const Color(0xFF4271AE),
literalStyle: const Color(0xFF795E26),
commentStyle: const Color(0xFF8E908C),
punctuationStyle: const Color(0xFF2B2B2B),
stringStyle: const Color(0xFF718C00),
numberStyle: const Color(0xFF0992D6),
bracket1Style: const Color(0xFF3E9F5E),
bracket2Style: const Color(0xFFD67F00),
bracket3Style: const Color(0xFFD64F4F),
variableStyle: const Color(0xFF4271AE),
);
}
class MyDarkSyntaxTheme extends SyntaxColorSchema {
const MyDarkSyntaxTheme()
: super(
baseStyle: const Color(0xFFE0E0E0),
lineNumberStyle: const Color(0xFF7F8C8D),
keywordStyle: const Color(0xFF81A2BE),
specialKeywordStyle: const Color(0xFFB294BB),
storageModifierStyle: const Color(0xFFB294BB),
typeStyle: const Color(0xFFF0C674),
functionStyle: const Color(0xFF8ABEB7),
literalStyle: const Color(0xFFDE935F),
commentStyle: const Color(0xFF969896),
punctuationStyle: const Color(0xFFE0E0E0),
stringStyle: const Color(0xFFB5BD68),
numberStyle: const Color(0xFFDE935F),
bracket1Style: const Color(0xFFA0E8A5),
bracket2Style: const Color(0xFFD5A0E8),
bracket3Style: const Color(0xFFE8A0A0),
variableStyle: const Color(0xFF8ABEB7),
);
}
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,
darkColorSchema: MyDarkSyntaxTheme(),
lightColorSchema: MyLightSyntaxTheme(),
showLineNumbers: _showLineNumbers,
enableCodeSelection: _enableCodeSelection,
),
),
),
),
],
),
),
),
);
}
}
```
## Properties
| Property | Type | Default | Description |
| ------------------- | ------------------ | ------------------------ | ---------------------------------------------------- |
| code | String | – | The source code to be displayed. |
| isDarkMode | bool | false | Toggles between light and dark mode. |
| darkColorSchema | SyntaxColorSchema? | SyntaxThemes.vsCodeDark | Custom color scheme for dark mode. |
| lightColorSchema | SyntaxColorSchema? | SyntaxThemes.vsCodeLight | Custom color scheme for light mode. |
| fontSize | double | 14.0 | Font size for the code text. |
| lineHeight | double | 1.35 | Height of each line of code. |
| showLineNumbers | bool | true | Displays line numbers next to the code. |
| enableCodeSelection | bool | true | Allows selection of the displayed text. |
| maxCharCount | int? | null | Maximum number of characters for the line numbering. |
| lineNumberOffset | int | 1 | The starting number for line count. |
## Contributing
1. Fork the project.
2. Create a feature branch:
```bash
git checkout -b feature/AmazingFeature
```
3. Commit changes:
```bash
git commit -m 'Add some AmazingFeature'
```
4. Push to branch:
```bash
git push origin feature/AmazingFeature
```
5. Open a Pull Request.
## License
Distributed under the **MIT License**. See the [LICENSE](LICENSE) file for more information.
## Author
Developed by **Dário Matias**:
- **Portfolio**: [dariomatias-dev](https://dariomatias-dev.com)
- **GitHub**: [dariomatias-dev](https://github.com/dariomatias-dev)
- **Email**: [matiasdario75@gmail.com](mailto:matiasdario75@gmail.com)
- **Instagram**: [@dariomatias_dev](https://instagram.com/dariomatias_dev)
- **LinkedIn**: [linkedin.com/in/dariomatias-dev](https://linkedin.com/in/dariomatias-dev)