DartCodeViewer class

A code viewer for the dart language.

A code viewer can be used to display dart code. By default the DartCodeViewer gives you a Theme based code view. If you are using a ThemeMode that is light than you will get the light option. Note that the default background of the code viewer is based off ColorScheme.background.

Supplying a non-null data String is required as input.

Requires one of its ancestors to be a Material widget.

Requires one of its ancestors to be a MediaQuery widget. Typically, these are introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.

{@tool dartpad --template=stateless_widget_scaffold}

![A dart_code_viewer example for light mode.] (https://github.com/JoseAlba/dart_code_viewer/images/import_example)

Here is an example of a small string that shows up as Dart code in a flutter application.

Widget build(BuildContext context) {
  return DartCodeViewer(r'class DartCodeViewer extends StatelessWidget {}');


See also:

  • DartCodeViewerTheme and DartCodeViewerThemeData for information about controlling the visual appearance of the DartCodeViewer.
  • Code viewer online tool is a useful tool that lets you choose the color for each different style. On the left side you put your example code and on the right you can choose the colors you want the code viewer to display. background => backgroundColor plain text => baseStyle Punctuation => punctuationStyle String, values => stringStyle Keywords, tags => keywordStyle Comments => commentStyle Types => classStyle Numbers => numberStyle Declarations => constantStyle
  • MediaQuery, from which the default height and width factor is obtained.


DartCodeViewer(String data, {Key key, TextStyle baseStyle, TextStyle classStyle, TextStyle commentStyle, TextStyle constantStyle, TextStyle keywordStyle, TextStyle numberStyle, TextStyle punctuationStyle, TextStyle stringStyle, Color backgroundColor, Text copyButtonText, bool showCopyButton, double height, double width})
DartCodeViewer requires a String that will be the code shown within the code viewer. This should be dart code and it is preferable if you use a raw string by adding an r before the string.
DartCodeViewer.dark(String data)
Common code viewer highlighter for ThemeMode.dark.
DartCodeViewer.darkAlt(String data)
Code viewer dark alternative for ThemeMode.dark.
DartCodeViewer.designDark(String data)
Code viewer highlighter with a great dark design for ThemeMode.dark.
DartCodeViewer.flutterInteract19(String data)
Code viewer highlighter for Flutter Interact 2019.
DartCodeViewer.io17(String data)
Code viewer highlighter for Google IO 2017.
DartCodeViewer.io19(String data)
Code viewer highlighter for Google IO 2019.
DartCodeViewer.light(String data)
Common code viewer highlighter for ThemeMode.light.
DartCodeViewer.lightAlt(String data)
Code viewer light alternative for ThemeMode.light.
DartCodeViewer.textColor(String data, {TextStyle textStyle, Color baseColor, Color classColor, Color commentColor, Color constantColor, Color keywordColor, Color numberColor, Color punctuationColor, Color stringColor, Color backgroundColor, Text copyButtonText, bool showCopyButton, double height, double width})
Create a DartCodeViewer based of one TextStyle. Optional Color parameters which change the TextStyle color for that highlighter type. [...]


backgroundColor Color
The background Color of the code. By default it is Theme.of(context).colorScheme.background.
baseStyle TextStyle
The text style for the plain text in code.
classStyle TextStyle
The text style for the code types in the code. [...]
commentStyle TextStyle
The text style for the commented out code.
constantStyle TextStyle
The text style for the constant style code.
copyButtonText Text
The text shown in the copy button by default it is 'COPY ALL'.
data String
The string that is transformed into code. This is a required variable.
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
height double
The height of the DartCodeViewer by default it uses the MediaQuery.of(context).size.height
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
keywordStyle TextStyle
The text style for keywords. For example: [...]
numberStyle TextStyle
The text style for numbers within the code.
punctuationStyle TextStyle
The text style for punctuation code like periods and commas.
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
showCopyButton bool
Shows copy button that lets user copy all the code as a raw string. By default the button is showing.
stringStyle TextStyle
The text style for Strings. For example the data when using the Text widget.
width double
The width of the DartCodeViewer by default it uses the MediaQuery.of(context).size.width


build(BuildContext context) Widget
Describes the part of the user interface represented by this widget. [...]
codifyString(String content, DartCodeViewerThemeData dartCodeViewerThemeData) InlineSpan
createElement() StatelessElement
Creates a StatelessElement to manage this widget's location in the tree. [...]
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
decodeString(String string) String
Read raw string as regular String. Converts Unicode characters to actual numbers.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
stringToTextSpan(String string, DartCodeViewerThemeData dartCodeViewerThemeData) TextSpan
toDiagnosticsNode({String name, DiagnosticsTreeStyle style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object. [...]
toStringDeep({String prefixLineOne = '', String prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants. [...]
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object. [...]
toStringShort() String
A short, textual description of this widget.


operator ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited