Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Story View Directionality Aware (Support RTL) #179

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Make Story View Directionality Aware (Support RTL) #179

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
84c2302
add _isRightToLeft logic in StoryView to detect the directionality of…
FirasAlShawa Mar 27, 2024
8d67c07
directionality aware for the previous click
FirasAlShawa Mar 27, 2024
9f017c3
enhance the previous click space to be 20% of the device width
FirasAlShawa Mar 27, 2024
cd8c04d
update IndicatorOval to accept TextDirection attribute
FirasAlShawa Mar 27, 2024
7806fa0
update IndicatorOval to accept TextDirection attribute
FirasAlShawa Mar 27, 2024
db6ae07
pass TextDirection IndicatorOval
FirasAlShawa Mar 27, 2024
5aebd93
handle the padding between the PageBars based on the directionality
FirasAlShawa Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 22 additions & 10 deletions lib/widgets/story_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -627,6 +627,8 @@ class StoryViewState extends State<StoryView> with TickerProviderStateMixin {
_nextDebouncer = Timer(Duration(milliseconds: 500), () {});
}

bool get _isRightToLeft => Directionality.of(context) == TextDirection.ltr;

@override
Widget build(BuildContext context) {
return Container(
Expand Down Expand Up @@ -713,13 +715,15 @@ class StoryViewState extends State<StoryView> with TickerProviderStateMixin {
},
)),
Align(
alignment: Alignment.centerLeft,
alignment:
_isRightToLeft ? Alignment.centerLeft : Alignment.centerRight,
heightFactor: 1,
child: SizedBox(
child: GestureDetector(onTap: () {
widget.controller.previous();
}),
width: 70),
child: GestureDetector(onTap: () {
widget.controller.previous();
}),
width: MediaQuery.of(context).size.width * 0.2,
),
),
],
),
Expand Down Expand Up @@ -792,8 +796,8 @@ class PageBarState extends State<PageBar> {
children: widget.pages.map((it) {
return Expanded(
child: Container(
padding: EdgeInsets.only(
right: widget.pages.last == it ? 0 : this.spacing),
padding: EdgeInsetsDirectional.only(
end: widget.pages.last == it ? 0 : this.spacing),
child: StoryProgressIndicator(
isPlaying(it) ? widget.animation!.value : (it.shown ? 1 : 0),
indicatorHeight:
Expand Down Expand Up @@ -833,10 +837,12 @@ class StoryProgressIndicator extends StatelessWidget {
foregroundPainter: IndicatorOval(
this.indicatorForegroundColor?? Colors.white.withOpacity(0.8),
this.value,
Directionality.of(context),
),
painter: IndicatorOval(
this.indicatorColor?? Colors.white.withOpacity(0.4),
1.0,
Directionality.of(context),
),
);
}
Expand All @@ -845,16 +851,22 @@ class StoryProgressIndicator extends StatelessWidget {
class IndicatorOval extends CustomPainter {
final Color color;
final double widthFactor;
final TextDirection direction;

IndicatorOval(this.color, this.widthFactor);
IndicatorOval(this.color, this.widthFactor, this.direction);

@override
void paint(Canvas canvas, Size size) {
final paint = Paint()..color = this.color;
final double left = direction == TextDirection.ltr ? 0 : size.width;
final double width = direction == TextDirection.ltr
? size.width * this.widthFactor
: size.width * -this.widthFactor;
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromLTWH(0, 0, size.width * this.widthFactor, size.height),
Radius.circular(3)),
Rect.fromLTWH(left, 0, width, size.height),
Radius.circular(3),
),
paint);
}

Expand Down