Skip to content

Commit

Permalink
ui: Fix stories aspect ratio
Browse files Browse the repository at this point in the history
  • Loading branch information
@0niel
0niel committed Jan 10, 2024
1 parent 8e6186a commit 41c81ba
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 156 deletions.
1 change: 0 additions & 1 deletion lib/services/view/services_page.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:rtu_mirea_app/presentation/theme.dart';
import 'package:url_launcher/url_launcher_string.dart';

Expand Down
323 changes: 170 additions & 153 deletions lib/stories/view/stories_page_view.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher_string.dart';

Expand Down Expand Up @@ -26,28 +26,19 @@ class StoriesPageView extends StatefulWidget {
}

class _StoriesPageViewState extends State<StoriesPageView> {
// In order not to send the same request to analytics several times
int _prevStoryIndex = -1;

BoxConstraints _getConstraints(BuildContext context) {
final height = MediaQuery.of(context).size.height;

return BoxConstraints(
maxHeight: 1080,
maxWidth: height * 9 / 16,
);
}

@override
Widget build(BuildContext context) {
return DismissiblePage(
onDismissed: () => context.pop(),
isFullScreen: false,
direction: DismissiblePageDismissDirection.vertical,
child: OverflowBox(
child: Center(
child: ConstrainedBox(
constraints: _getConstraints(context),
return Padding(
padding: const EdgeInsets.only(top: 22),
child: DismissiblePage(
onDismissed: () => context.pop(),
isFullScreen: false,
direction: DismissiblePageDismissDirection.vertical,
backgroundColor: Colors.transparent,
child: OverflowBox(
child: Center(
child: Material(
color: Colors.transparent,
child: Hero(
Expand All @@ -66,142 +57,10 @@ class _StoriesPageViewState extends State<StoriesPageView> {
}
final author = widget.stories[pageIndex].author;
final page = widget.stories[pageIndex].pages[storyIndex];
return Stack(
children: [
Positioned.fill(
child: Container(color: Colors.black),
),
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: page.media.formats != null
? CachedNetworkImage(
imageUrl:
MediaQuery.of(context).size.width > 580
? StrapiUtils.getLargestImageUrl(
page.media.formats!)
: StrapiUtils.getMediumImageUrl(
page.media.formats!),
fit: BoxFit.cover,
)
: CachedNetworkImage(
imageUrl: page.media.url,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.only(top: 44, left: 8),
child: Row(
children: [
Container(
height: 32,
width: 32,
decoration: BoxDecoration(
image: DecorationImage(
image: author.logo.formats != null
? NetworkImage(
author.logo.formats!.small != null
? author
.logo.formats!.small!.url
: author.logo.formats!.thumbnail
.url)
: NetworkImage(author.logo.url),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
),
),
const SizedBox(
width: 8,
),
Material(
type: MaterialType.transparency,
child: Text(author.name,
style: AppTextStyle.bodyBold),
),
],
),
),
Positioned(
top: 105,
left: 24,
right: 24,
child: Material(
type: MaterialType.transparency,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (page.title != null)
Column(
children: [
Text(
page.title!,
style: AppTextStyle.h4,
),
const SizedBox(height: 16)
],
),
if (page.text != null)
Text(
page.text!,
style: AppTextStyle.bodyBold,
)
],
),
),
),
],
);
return _buildStoryPage(author, page);
},
gestureItemBuilder: (context, pageIndex, storyIndex) {
return Column(
children: [
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.only(top: 32),
child: Material(
color: Colors.transparent,
child: IconButton(
padding: EdgeInsets.zero,
color: Colors.white,
icon: const Icon(Icons.close),
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
),
onPressed: () => context.pop(),
),
),
),
),
const Spacer(),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 24, vertical: 20),
child: Column(
children: List.generate(
widget.stories[pageIndex].pages[storyIndex]
.actions.length,
(index) => Padding(
padding: const EdgeInsets.only(bottom: 8),
child: PrimaryButton(
text: widget.stories[pageIndex]
.pages[storyIndex].actions[index].title,
onClick: () {
launchUrlString(widget.stories[pageIndex]
.pages[storyIndex].actions[index].url);
},
),
),
),
),
),
],
);
return _buildGestureItems(pageIndex, storyIndex);
},
pageLength: widget.stories.length,
storyLength: (int pageIndex) {
Expand All @@ -216,4 +75,162 @@ class _StoriesPageViewState extends State<StoriesPageView> {
),
);
}

Widget _buildStoryPage(Author author, StoryPage page) {
return Stack(
children: [
AspectRatio(
aspectRatio: 9 / 16,
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: page.media.formats != null
? ExtendedImage.network(
StrapiUtils.getLargestImageUrl(page.media.formats!),
fit: BoxFit.cover,
cache: true,
)
: ExtendedImage.network(
page.media.url,
fit: BoxFit.cover,
cache: true,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 44, left: 8),
child: Row(
children: [
Container(
height: 32,
width: 32,
decoration: BoxDecoration(
image: DecorationImage(
image: author.logo.formats != null
? NetworkImage(author.logo.formats!.small != null
? author.logo.formats!.small!.url
: author.logo.formats!.thumbnail.url)
: NetworkImage(author.logo.url),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black
.withOpacity(0.5), // Adjust the opacity as needed
BlendMode.srcATop,
),
),
shape: BoxShape.circle,
),
),
const SizedBox(
width: 8,
),
Material(
type: MaterialType.transparency,
child: ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.black.withOpacity(0.5),
Colors.black.withOpacity(0.5),
],
).createShader(
Rect.fromLTRB(
0,
0,
rect.width,
rect.height,
),
);
},
blendMode: BlendMode.srcATop,
child: Text(
author.name,
style: AppTextStyle.bodyBold,
),
),
),
],
),
),
Positioned(
top: 105,
left: 24,
right: 24,
child: Material(
type: MaterialType.transparency,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (page.title != null)
Column(
children: [
Text(
page.title!,
style: AppTextStyle.h4,
),
const SizedBox(height: 16)
],
),
if (page.text != null)
Text(
page.text!,
style: AppTextStyle.bodyBold,
)
],
),
),
),
],
);
}

Widget _buildGestureItems(int pageIndex, int storyIndex) {
return Column(
children: [
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.only(top: 42),
child: Material(
color: Colors.transparent,
child: IconButton(
padding: EdgeInsets.zero,
color: Colors.white,
icon: const Icon(Icons.close),
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
),
onPressed: () => context.pop(),
),
),
),
),
const Spacer(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 20),
child: Column(
children: List.generate(
widget.stories[pageIndex].pages[storyIndex].actions.length,
(index) => Padding(
padding: const EdgeInsets.only(bottom: 8),
child: PrimaryButton(
text: widget.stories[pageIndex].pages[storyIndex]
.actions[index].title,
onClick: () {
launchUrlString(widget.stories[pageIndex].pages[storyIndex]
.actions[index].url);
},
),
),
),
),
),
],
);
}
}
4 changes: 2 additions & 2 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ publish_to: 'none'
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.4.2+55
version: 1.4.3+56

environment:
sdk: ">=3.1.1"
Expand Down Expand Up @@ -139,7 +139,7 @@ dependencies:
# Instagram stories like UI with rich animations and customizability.
# See https://pub.dev/packages/story
story: ^1.1.0

# Official extension image, support placeholder(loading)/ failed state,
# cache network, zoom/pan, photo view, slide out page,
# editor(crop,rotate,flip), painting etc.
Expand Down

0 comments on commit 41c81ba

Please sign in to comment.