SmartSyntaxWidget for Flutter

SmartSyntaxWidget is a Flutter package designed to simplify the process of displaying mixed content types, specifically standard text and code snippets, within your Flutter applications. This package offers an efficient way to parse and render text and code seamlessly, enhancing readability and user experience.

Features

Flexible Parsing:

SmartSyntaxWidget can intelligently differentiate between standard text and Dart code snippets in a given string.

Customizable Display:

Render text and code with distinct styles, ensuring clear distinction and readability.

Easy Integration

Simple to implement within existing Flutter projects.

Installation

Use this package as a library

with Flutter:

 $ flutter pub add smart_syntax_widget

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  smart_syntax_widget: ^0.0.1

Import it

Now in your Dart code, you can use:

import 'package:smart_syntax_widget/smart_syntax_widget.dart';

Usage Scenarios

Scenario 1: Displaying Only Code

For instances where you need to display only Dart code with proper formatting, SmartSyntaxWidget handles this effortlessly.

     SmartSyntaxWidget(
                    text: "only code text" ,
                    textStyle: TextStyle(color: Colors.black.withOpacity(0.55)),
                    lineNumbers: Props.lineNumbers,
                    isSelectableText: Props.isSelectableText,
                    copyIcon: Icon(
                      Icons.copy_rounded,
                      size: 15,
                      color: Colors.white.withOpacity(0.55),
                    ),
                    hasCopyButton: false,
                    theme: SmartSyntaxWidgetTheme(
                      codeBackgroundDecoration: BoxDecoration(color: Colors.black.withOpacity(0.70)),
                      codeHeaderDecoration: BoxDecoration(color: Colors.black.withOpacity(0.90)),
                      codeHeaderTextStyle: TextStyle(color: Colors.black.withOpacity(0.55)),
                    )),

Scenario 2: Mixed Text and Code String

When dealing with a string that contains both text and Dart code snippets, SmartSyntaxWidget seamlessly parses and displays them.

     SmartSyntaxWidget(
                    text: "code and text together" ,
                    textStyle: TextStyle(color: Colors.black.withOpacity(0.55)),
                    lineNumbers: Props.lineNumbers,
                    isSelectableText: Props.isSelectableText,
                    copyIcon: Icon(
                      Icons.copy_rounded,
                      size: 15,
                      color: Colors.white.withOpacity(0.55),
                    ),
                    hasCopyButton: false,
                    theme: SmartSyntaxWidgetTheme(
                      codeBackgroundDecoration: BoxDecoration(color: Colors.black.withOpacity(0.70)),
                      codeHeaderDecoration: BoxDecoration(color: Colors.black.withOpacity(0.90)),
                      codeHeaderTextStyle: TextStyle(color: Colors.black.withOpacity(0.55)),
                    )),

Scenario 3: Utilizing Package Functions

SmartSyntaxWidget offers a straightforward API for parsing and rendering mixed content types.

1. Create an Instance:

SmartSyntaxWidget _smartSyntaxWidget = SmartSyntaxWidget();

2. Send String Value to Function:

List<MessageElement> elements = _smartSyntaxWidget.slicedSpans(_text);

3. Use Element Data:

class MessageElement {
  String standartElementValue;
  TextTypesEnum elementType;
  LanguageEnum? elementLanguage;
  List<TextSpan> textSpans;

  MessageElement({
    required this.standartElementValue,
    required this.elementType,
    this.elementLanguage,
    this.textSpans = const [],
  });
}

Depending on the elementType (TextTypesEnum.text or TextTypesEnum.code), you can utilize standartElementValue for text or textSpans for code segments.

Example Implementation

String _text = '''
// Your mixed content with text and Dart code
''';

SmartSyntaxWidget _smartSyntaxWidget = SmartSyntaxWidget();
List<MessageElement> elements = _smartSyntaxWidget.slicedSpans(_text);

Widget _highlighter() => Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: _smartSyntaxWidget
          .slicedSpans(_text)
          .map((e) => e.elementType == TextTypesEnum.text
              ? _smartSyntaxWidget.standartTextReturn(e)
              : e.elementType == TextTypesEnum.code
                  ? _smartSyntaxWidget.codeArea(_smartSyntaxWidget.richTextReturn(messageElement: e), e)
                  : _smartSyntaxWidget.standartTextReturn(e))
          .toList(),
    );

Padding(
    padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
    child: _highlighter()
);

Feel free to customize the implementation as per your application needs.

Screenshots

Input & Output

Input & Output

Who's using it?

• ThinkBuddy - Made for native MacOS experience integrated with AI

🚀 About Me

Hello, I'm Sezer Ufuk, the Co-Founder & CTO at ThinkBuddy, LLC. I specialize in leading technical development and innovation, with a passion for creating valuable packages for Flutter developers in my spare time. Explore my work and contributions on GitHub.

Authors

• @suysoftware

License

MIT