smart_syntax_widget

Description:

smart syntax widget

SmartSyntaxWidget for Flutter #
SmartSyntaxWidget is a Flutter package designed to simplify the process of displaying mixed content types, specifically standard text and Dart 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

copied to clipboard
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

copied to clipboard
Import it
Now in your Dart code, you can use:
import 'package:smart_syntax_widget/smart_syntax_widget.dart';
copied to clipboard
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)),
)),
copied to clipboard
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)),
)),
copied to clipboard
Scenario 3: Utilizing Package Functions #
SmartSyntaxWidget offers a straightforward API for parsing and rendering mixed content types.

Create an Instance:

SmartSyntaxWidget _smartSyntaxWidget = SmartSyntaxWidget();
copied to clipboard

Send String Value to Function:

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

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 [],
});
}
copied to clipboard
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()
);

copied to clipboard
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