Flutter – Syntax View with Example
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(){ //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
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(){ //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: