-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This commit updated the quoted text style app wide. Before this commit all the quoted text in notice and post are wrapped in a card with more elevation. From this commit on, these quoted text are surrounded by icon which looks like double quote symbol. Added `QuotedText` widget with two ways to construct: * Construct from normal `String` type text, will wrap in a `RichText`. * Construct from an `InlineSpan`, will be wrapped in a row with two `RichText` to ensure the visible style.
- Loading branch information
Showing
5 changed files
with
106 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import 'dart:math'; | ||
|
|
||
| import 'package:flutter/material.dart'; | ||
| import 'package:tsdm_client/constants/layout.dart'; | ||
|
|
||
| /// Widget to show some quoted text. | ||
| class QuotedText extends StatelessWidget { | ||
| /// Construct from [String] [text]. | ||
| const QuotedText(this.text, {super.key}) : span = null; | ||
|
|
||
| /// Construct from an [InlineSpan] span. | ||
| const QuotedText.rich(this.span, {super.key}) : text = null; | ||
|
|
||
| /// Text to show in quoted style. | ||
| final String? text; | ||
|
|
||
| /// Span to show in quoted style. | ||
| final InlineSpan? span; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| final quotedColor = Theme.of(context).colorScheme.tertiary; | ||
| final quotedStyle = | ||
| Theme.of(context).textTheme.bodyMedium?.copyWith(color: quotedColor); | ||
|
|
||
| final iconHead = Transform.rotate( | ||
| angle: 180 * pi / 180, | ||
| child: Icon(Icons.format_quote_rounded, size: 28, color: quotedColor), | ||
| ); | ||
|
|
||
| final spanHead = TextSpan(children: [WidgetSpan(child: iconHead)]); | ||
|
|
||
| final iconTail = | ||
| Icon(Icons.format_quote_rounded, size: 28, color: quotedColor); | ||
|
|
||
| final spanTail = TextSpan(children: [WidgetSpan(child: iconTail)]); | ||
|
|
||
| if (text != null) { | ||
| return Text.rich( | ||
| TextSpan(children: [spanHead, TextSpan(text: ' $text '), spanTail]), | ||
| ); | ||
| } | ||
|
|
||
| if (span != null) { | ||
| // Because we want to let the start quoted icon lay on the left of | ||
| // the content span, but rich text widgets and span widgets do not | ||
| // provide such api, we have to wrap the head and the rest of contents | ||
| // in two rich text and put in a row. | ||
| return Row( | ||
| crossAxisAlignment: CrossAxisAlignment.start, | ||
| children: [ | ||
| Text.rich( | ||
| WidgetSpan( | ||
| child: Row( | ||
| crossAxisAlignment: CrossAxisAlignment.start, | ||
| children: [ | ||
| iconHead, | ||
| ], | ||
| ), | ||
| ), | ||
| ), | ||
| sizedBoxW5H5, | ||
| Expanded( | ||
| child: Text.rich( | ||
| TextSpan( | ||
| children: [ | ||
| // Add a line feed to ensure the child content is lower than | ||
| // start quote icon in vertical direction. | ||
| TextSpan(text: '\n', style: quotedStyle, children: [span!]), | ||
| WidgetSpan( | ||
| child: Row( | ||
| children: [ | ||
| const Spacer(), | ||
| iconTail, | ||
| ], | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| ), | ||
| ], | ||
| ); | ||
| } | ||
|
|
||
| // Impossible. | ||
| return Container(); | ||
| } | ||
| } |