flutter_syntax_highlighter 0.2.1
flutter_syntax_highlighter: ^0.2.1 copied to clipboard
A widget for syntax highlighting of Dart and Flutter code, with support for light and dark themes, line numbers, and code selection.
import 'package:flutter/material.dart';
import 'package:flutter_syntax_highlighter/flutter_syntax_highlighter.dart';
void main() {
runApp(const MyApp());
}
const sampleCode = '''
import 'package:flutter/material.dart';
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
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<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _isDarkMode = false;
bool _showLineNumbers = true;
bool _enableCodeSelection = true;
double _fontSize = 14.0;
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: <Widget>[
IconButton(
icon: Icon(_isDarkMode ? Icons.light_mode : Icons.dark_mode),
onPressed: _toggleTheme,
tooltip: 'Toggle Theme',
),
],
),
body: SafeArea(
child: Column(
children: <Widget>[
SwitchListTile(
title: const Text('Show Line Numbers'),
value: _showLineNumbers,
onChanged: (value) => _toggleLineNumbers(),
),
SwitchListTile(
title: const Text('Enable Code Selection'),
value: _enableCodeSelection,
onChanged: (value) => _toggleCodeSelection(),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Font Size:', style: TextStyle(fontSize: 16.0)),
Row(
children: <Widget>[
IconButton(
onPressed: _fontSize > 14.0
? () {
setState(() {
_fontSize--;
});
}
: null,
icon: Icon(Icons.remove),
),
IconButton(
onPressed: _fontSize < 20.0
? () {
setState(() {
_fontSize++;
});
}
: null,
icon: Icon(Icons.add),
),
],
),
],
),
),
SizedBox(height: 12.0),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(8.0),
child: SyntaxHighlighter(
code: sampleCode,
isDarkMode: _isDarkMode,
showLineNumbers: _showLineNumbers,
enableCodeSelection: _enableCodeSelection,
fontSize: _fontSize,
),
),
),
],
),
),
),
);
}
}