Flutter – Syntax View with Example
Last Updated :
29 Sep, 2022
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.
Dart
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:
Dart
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.
Dart
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.
Dart
static const String code = r "" "
#include<iostream>
#include<list>
using namespace std;
int main(){
list< int >lt;
for ( int i = 0; i < 5; i++)
{
lt.push_back(i*2);
}
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
Dart
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(){
list< int >lt;
for ( int i = 0; i < 5; i++)
{
lt.push_back(i*2);
}
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(
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(
code: code,
syntax: Syntax.DART,
syntaxTheme: SyntaxTheme.vscodeDark(),
fontSize: 12.0,
withZoom: true ,
withLinesCount: true ,
expanded: false ,
),
)
],
));
}
}
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...