Open In App

Flutter – Syntax View with Example

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Flutter - Syntax View Output

 



Last Updated : 29 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads