132 lines
4.3 KiB
Dart
132 lines
4.3 KiB
Dart
import 'package:didvan/models/story_model.dart';
|
|
import 'package:didvan/routes/routes.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
class StorySection extends StatelessWidget {
|
|
final List<UserStories> stories;
|
|
|
|
const StorySection({super.key, required this.stories});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SizedBox(
|
|
height: 110.0,
|
|
child: ListView.builder(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8.0),
|
|
scrollDirection: Axis.horizontal,
|
|
reverse: true,
|
|
itemCount: stories.length,
|
|
itemBuilder: (BuildContext context, int index) {
|
|
final userStories = stories[index];
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 4.0),
|
|
child: _StoryCircle(
|
|
userStories: userStories,
|
|
onTap: () {
|
|
Navigator.of(context).pushNamed(
|
|
Routes.storyViewer,
|
|
arguments: {
|
|
'stories': stories,
|
|
'tappedIndex': index,
|
|
},
|
|
);
|
|
},
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _StoryCircle extends StatelessWidget {
|
|
final UserStories userStories;
|
|
final VoidCallback onTap;
|
|
|
|
const _StoryCircle({required this.userStories, required this.onTap});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final allStoriesViewed = ValueNotifier<bool>(
|
|
userStories.stories.every((story) => story.isViewed.value));
|
|
|
|
for (var story in userStories.stories) {
|
|
story.isViewed.addListener(() {
|
|
allStoriesViewed.value =
|
|
userStories.stories.every((s) => s.isViewed.value);
|
|
});
|
|
}
|
|
|
|
return InkWell(
|
|
onTap: onTap,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
ValueListenableBuilder<bool>(
|
|
valueListenable: allStoriesViewed,
|
|
builder: (context, isViewed, child) {
|
|
return Container(
|
|
width: 85.0,
|
|
height: 85.0,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
gradient: isViewed
|
|
? const LinearGradient(
|
|
colors: [
|
|
Color.fromARGB(255, 184, 184, 184),
|
|
Color.fromARGB(255, 184, 184, 184)
|
|
],
|
|
)
|
|
: const LinearGradient(
|
|
colors: [
|
|
Color.fromARGB(255, 1, 35, 54),
|
|
Color.fromARGB(255, 178, 4, 54),
|
|
],
|
|
begin: Alignment.topRight,
|
|
end: Alignment.bottomLeft,
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(4.0),
|
|
child: Container(
|
|
decoration: const BoxDecoration(
|
|
color: Colors.white,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(4.0),
|
|
child: CircleAvatar(
|
|
backgroundColor:
|
|
const Color.fromARGB(255, 230, 242, 246),
|
|
child: ClipOval(
|
|
child: Image.asset(
|
|
userStories.user
|
|
.profileImageUrl,
|
|
fit: BoxFit.cover,
|
|
width: 50.0,
|
|
height: 50.0,
|
|
errorBuilder: (context, error, stackTrace) {
|
|
return const Icon(Icons.person,
|
|
color: Colors.grey, size: 40.0);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
const SizedBox(height: 6.0),
|
|
Text(
|
|
userStories.user.name,
|
|
style: const TextStyle(fontSize: 12.0, fontWeight: FontWeight.w500),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|