styled_text_advance 1.0.0+8 styled_text_advance: ^1.0.0+8 copied to clipboard
Text widget with formatted text using tags. Makes it easier to use formatted text in multilingual applications.
import 'package:flutter/material.dart';
import 'package:styled_text_advance/styled_text_advance.dart';
import 'package:styled_text_advance/tags/styled_text_advance_tag_img.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'StyledTextAdvance Demo',
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: const DemoPage(),
);
}
}
class DemoPage extends StatelessWidget {
const DemoPage({super.key});
void _alert(BuildContext context) {
showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Tapped'),
actions: <Widget>[
TextButton(
child: const Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
void _openLink(BuildContext context, Map<String?, String?> attrs) {
final String link = attrs['href'] ?? "";
showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Open Link'),
content: Text(link),
actions: <Widget>[
TextButton(
child: const Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return SelectionArea(
child: Scaffold(
appBar: AppBar(
title: const Text('StyledTextAdvance Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
// Simple formatted text
StyledTextAdvance(
text: 'Test: <b>bold</b> text.',
tags: {
'b': StyledTextAdvanceTag(
style: const TextStyle(fontWeight: FontWeight.bold)),
},
),
// Text with quotes
const SizedBox(height: 20),
StyledTextAdvance(
text: 'Quoted Test: <b>"bold"</b> text.',
tags: {
'b': StyledTextAdvanceTag(
style: const TextStyle(fontWeight: FontWeight.bold)),
},
),
// Multiline text without breaks
const SizedBox(height: 20),
StyledTextAdvance(
text: """Multiline text (no breaks)""",
tags: {
'b': StyledTextAdvanceTag(
style: const TextStyle(fontWeight: FontWeight.bold)),
},
),
// Multiline text with breaks
const SizedBox(height: 20),
StyledTextAdvance(
text: """Multiline text (with breaks)""",
newLineAsBreaks: true,
tags: {
'b': StyledTextAdvanceTag(
style: const TextStyle(fontWeight: FontWeight.bold)),
},
),
// Custom tags styles
const SizedBox(height: 20),
StyledTextAdvance(
text: 'Test: <bold>bold</bold> and <red>red color</red> text.',
tags: {
'bold': StyledTextAdvanceTag(
style: const TextStyle(fontWeight: FontWeight.bold)),
'red': StyledTextAdvanceTag(
style: const TextStyle(
fontWeight: FontWeight.bold, color: Colors.red)),
},
),
// Icon
const SizedBox(height: 20),
StyledTextAdvance(
text: 'Text with alarm <alarm/> icon.',
tags: {
'alarm': StyledTextAdvanceIconTag(Icons.alarm),
},
),
// Image
const SizedBox(height: 20),
StyledTextAdvance(
text:
'Here is a local image: <img>assets/image.jpg</img> and a network image: <img>https://example.com/image.jpg</img>.',
tags: {
'img': StyledTextAdvanceImageTag(
width: 100,
height: 100,
fit: BoxFit.cover,
),
},
),
// Action
const SizedBox(height: 20),
StyledTextAdvance(
text: 'Text with <action>action</action> inside.',
tags: {
'action': StyledTextAdvanceActionTag(
(_, attrs) => _alert(context),
style:
const TextStyle(decoration: TextDecoration.underline),
),
},
),
// Link
const SizedBox(height: 20),
StyledTextAdvance(
text:
'Text with <link href="https://flutter.dev">link</link> inside.',
tags: {
'link': StyledTextAdvanceActionTag(
(_, attrs) => _openLink(context, attrs),
style:
const TextStyle(decoration: TextDecoration.underline),
),
},
),
// SelectableText with Link
const SizedBox(height: 20),
StyledTextAdvance.selectable(
text:
'Text with <link href="https://flutter.dev">link</link> inside.',
tags: {
'link': StyledTextAdvanceActionTag(
(_, attrs) => _openLink(context, attrs),
style:
const TextStyle(decoration: TextDecoration.underline),
),
},
),
// Text with superscript
const SizedBox(height: 20),
StyledTextAdvance(
text: "Famous equation: E=mc<sup>2</sup>",
tags: {
'sup': StyledTextAdvanceWidgetBuilderTag(
(_, attributes, textContent) {
return Transform.translate(
offset: const Offset(0.5, -4),
child: Text(
textContent ?? "",
textScaleFactor: 0.85,
),
);
},
),
},
),
// Text with subscript
const SizedBox(height: 20),
StyledTextAdvance(
text: "The element of life: H<sub>2</sub>0",
tags: {
'sub': StyledTextAdvanceWidgetBuilderTag(
(_, attributes, textContent) {
return Transform.translate(
offset: const Offset(0.5, 4),
child: Text(
textContent ?? "",
textScaleFactor: 0.8,
),
);
},
),
},
),
],
),
),
),
);
}
}