Dart Code Viewer

Dart Code Viewer Flutter package

The dart_code_viewer package for Flutter allows you to easily show and copy dart code in your Flutter application.

Getting Started

With the dart_code_viewer package, you can show Dart code in a Flutter application. The dart_code_viewer is well documented and has the same theming pattern that the Flutter framework has.

The code viewer can be used to display dart code. By default the DartCodeViewer gives you a theme based code view. This means that the code viewer has two different default theming , light and dark mode.

The code viewer requires a non-null data String as required input.

The DartCodeViewer requires one of its ancestors to be a Material widget. This is because the code viewer uses the MediaQuery widget. Which is typically introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.

To use dart_code_viewer first you must add the ‘dart_code_viewer’ package to your pubspec dependencies.

To import DartCodeViewer:

import ‘package:dart_code_viewer/dart_code_viewer.dart’;

To use DartCodeViewer with the default DartCodeViewer:

DartCodeViewer(r’’’
void main() {
runApp(MyApp());
}
‘’’
),

Note: ‘’’ is a handy dart pattern that lets you write multiple strings in different lines. This is really useful if you want to import your dart code as a String like the example above.

You can also customize the theming of the DartCodeViewer by using its parameters:

DartCodeViewer(r’’’
void main() {
runApp(MyApp());
}
‘’’,
backgroundColor: GoogleFonts.robotoMono().copyWith(color: Colors.pink),
),

This will change the background color of the CodeViewer to Pink.

You can use this Code viewer tool to choose the color for each different highlighted token 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. Below is a table that shows you the difference between the code viewer tool and the dart code viewer parameter.

Code Viewer Tool => Dart Code Viewer Parameter

background => backgroundColor

plain text => baseStyle

Punctuation => punctuationStyle

String, values => stringStyle

Keywords, tags => keywordStyle

Comment => commentStyle

Types => classStyle

Numbers => numberStyle

You can use DartCodeViewer other constructor DartCodeViewer.textColor to change the color properties instead of the TextStyles. You can also set the TextStyle in case you don’t want to use the default textStyle RobotoMono. Here is an example on how you can use this constructor:

DartCodeViewer.textColor(r’’’
void main() {
runApp(MyApp());
}
‘’’,
  textStyle: GoogleFonts.lato(),
  commentColor: Colors.grey,
  baseColor: Colors.pink,
),

In the case above we are using the text style lato and we are changing the default colors for comment and base color to grey and pink respectively.

If you are having a hard time figuring out how to choose the Color for this tool. There are a few default DartCodeViewers at your disposal. Here are the code viewers that are well known:

- DartCodeViewer.light

- DartCodeViewer.lightAlt

- DartCodeViewer.dark

- DartCodeViewer.darkAlt

- DartCodeViewer.designDark

- DartCodeViewer.io17

- DartCodeViewer.io19

- DartCodeViewer.flutterInteract2019

Here is an example on how to use these themed code viewers.

DartCodeViewer.designDark(r’’’
void main() {
runApp(MyApp());
}
‘’’,
),

The DartCodeViewer can also be themed identical to how widgets in the material package get themed. You can theme the code viewer by having an ancestor of DartCodeViewerTheme. The dart code viewer theme describes the color, size, and text styles for the dart code viewer it is attached to.

Descendant widget obtains the current theme’s DartCodeViewerThemeData object using DartCodeViewerTheme.of(). When a widget uses DartCodeViewerTheme.of(), it is automatically rebuilt if the theme later changes.

Using the DartCodeViewerThemeData returns the data from the closest DartCodeViewerTheme instances that encloses the given context. The default parameters are set within the DartCodeViewer.

DartCodeViewerThemeData holds the color, size, and text styles for a dart code viewer theme. Use this class to configure a DartCodeViewerThemeData widget. To obtain the current ambient dart code viewer theme, use DartCodeViewerTheme.of().

The simplest way to create a DartCodeThemeData is to use the copyWith on the one you get from DartCodeViewerTheme.of(), or create an entirely new one with DartCodeViewerThemeData.

Here is an example below:

DartCodeViewerTheme(
  data: DartCodeViewerThemeData(
    backgroundColor: Colors.pink,
    copyButtonText: Text(‘Copiar’),
  ),
  child: DartCodeViewer.textColor(r’’’
void main() {
runApp(MyApp());
}
‘’’,
  textStyle: GoogleFonts.lato(),
  commentColor: Colors.grey,
  baseColor: Colors.pink,
),

Closing remarks

The dart code viewer is based off the code viewer from the Flutter Gallery. Learn more about the dart code viewer package.

To learn more about Jose, visit his pages on GitHub, LinkedIn, YouTube, and Instagram.