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.

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

{@end-tool}

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.
Inheritance

Constructors

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.
const
DartCodeViewer.dark(String data)
Common code viewer highlighter for ThemeMode.dark.
factory
DartCodeViewer.darkAlt(String data)
Code viewer dark alternative for ThemeMode.dark.
factory
DartCodeViewer.designDark(String data)
Code viewer highlighter with a great dark design for ThemeMode.dark.
factory
DartCodeViewer.flutterInteract19(String data)
Code viewer highlighter for Flutter Interact 2019.
factory
DartCodeViewer.io17(String data)
Code viewer highlighter for Google IO 2017.
factory
DartCodeViewer.io19(String data)
Code viewer highlighter for Google IO 2019.
factory
DartCodeViewer.light(String data)
Common code viewer highlighter for ThemeMode.light.
factory
DartCodeViewer.lightAlt(String data)
Code viewer light alternative for ThemeMode.light.
factory
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. [...]
factory

Properties

backgroundColor Color
The background Color of the code. By default it is Theme.of(context).colorScheme.background.
final
baseStyle TextStyle
The text style for the plain text in code.
final
classStyle TextStyle
The text style for the code types in the code. [...]
final
commentStyle TextStyle
The text style for the commented out code.
final
constantStyle TextStyle
The text style for the constant style code.
final
copyButtonText Text
The text shown in the copy button by default it is 'COPY ALL'.
final
data String
The string that is transformed into code. This is a required variable.
final
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
final
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
keywordStyle TextStyle
The text style for keywords. For example: [...]
final
numberStyle TextStyle
The text style for numbers within the code.
final
punctuationStyle TextStyle
The text style for punctuation code like periods and commas.
final
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.
final
stringStyle TextStyle
The text style for Strings. For example the data when using the Text widget.
final
width double
The width of the DartCodeViewer by default it uses the MediaQuery.of(context).size.width
final

Methods

build(BuildContext context) Widget
Describes the part of the user interface represented by this widget. [...]
override
codifyString(String content, DartCodeViewerThemeData dartCodeViewerThemeData) InlineSpan
createElement() StatelessElement
Creates a StatelessElement to manage this widget's location in the tree. [...]
inherited
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. [...]
inherited
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. [...]
inherited
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. [...]
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object. [...]
inherited
toStringDeep({String prefixLineOne = '', String prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants. [...]
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object. [...]
inherited
toStringShort() String
A short, textual description of this widget.
inherited

Operators

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