Widget with side-by-side source code view. A static syntax highlighter widget that highlights code text according to the programming language syntax using native Dart code. In many websites or applications, we need to show the code snippet. In this article, we will use different code view themes. A demo Video showing the all themes of syntax view –
How to Use
Supported Syntax for Language
- Dart
- C
- C++
- Java
- Kotlin
- Swift
- JavaScript
- YAML
Supported Themes
Standard, Dracula, AyuLight, AyuDark, GravityLight, GravityDark, MonokaiSublime, Obsidian, OceanSunset, vscodeDark, vscodeLight.
Getting Started
First, we need to add the dependency into the pubspec.yaml file.
dependencies: flutter_syntax_view: ^4.0.0
|
Don’t forget to get packages,
Note: Version of the package may changes at the time of you reading.
Now in your Dart code, you can use:
import 'package:flutter_syntax_view/flutter_syntax_view.dart' ;
|
Create a stateful widget or class App. And return the MaterialApp, in home property give the new class MyApp. You may also give the debugShowCheckedModeBanner and make it false.
import 'package:flutter_syntax_view/flutter_syntax_view.dart' ;
import 'package:flutter/material.dart' ;
void main() {
runApp(MaterialApp(home: myApp()));
} class myApp extends StatefulWidget {
const myApp({super.key});
@override
State<myApp> createState() => _myAppState();
} class _myAppState extends State<myApp> {
@override
} |
Now in class MyApp make string code that will we our code snippet to show. This will be anything that you want to show but it should be supported language. Here is our code string in the dart language.
static const String code = r "" "
#include<iostream> #include<list> using namespace std;
int main(){
//making list list< int >lt;
//Adding list element for ( int i = 0; i < 5; i++)
{ lt.push_back(i*2); } //print linked list for ( auto i=lt.begin(); i!= lt.end(); i++)
{ cout<<lt[*i]; } } "" ";
|
We will only be showing the demo by using the two themes, you can create all by changing the themes- Standard, Dracula, AyuLight, AyuDark, GravityLight, GravityDark, MonokaiSublime, Obsidian, OceanSunset, vscodeDark, vscodeLight.
Code Example
import 'package:flutter_syntax_view/flutter_syntax_view.dart' ;
import 'package:flutter/material.dart' ;
void main() {
runApp(MaterialApp(home: myApp()));
} class myApp extends StatefulWidget {
const myApp({super.key});
@override
State<myApp> createState() => _myAppState();
} class _myAppState extends State<myApp> {
@override
static const String code = r "" "
#include<iostream>
#include<list>
using namespace std;
int main(){
//making list
list< int >lt;
//Adding list element
for ( int i = 0; i < 5; i++)
{
lt.push_back(i*2);
}
//print linked list
for ( auto i=lt.begin(); i!= lt.end(); i++)
{
cout<<lt[*i];
}
}
"" ";
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( "Flutter Syntax View Example" ),
backgroundColor: Color.fromARGB(255, 50, 156, 82),
elevation: 6,
),
body: Column(
children: [
Container(
height: MediaQuery.of(context).size.height / 2.5,
child: SyntaxView(
// syntax view for theme vscodelight,
code: code,
syntax: Syntax.DART,
syntaxTheme: SyntaxTheme.vscodeLight(),
fontSize: 12.0,
withZoom: true ,
withLinesCount: true ,
expanded: true ),
),
Container(
height: MediaQuery.of(context).size.height / 2.5,
child: SyntaxView(
// syntax view for theme vscodedark
code: code,
syntax: Syntax.DART,
syntaxTheme: SyntaxTheme.vscodeDark(),
fontSize: 12.0,
withZoom: true ,
withLinesCount: true ,
expanded: false ,
),
)
],
));
}
} |
Output: