update text + slider

This commit is contained in:
Phuoc Nguyen
2025-12-03 17:20:22 +07:00
parent 2a14f82b72
commit 8ff7b3b505
2 changed files with 65 additions and 13 deletions

View File

@@ -252,7 +252,7 @@ class _HomePageState extends ConsumerState<HomePage> {
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: 16), padding: const EdgeInsets.symmetric(horizontal: 16),
child: Text( child: Text(
'Chương trình ưu đãi', 'Tin tức nổi bật',
style: TextStyle( style: TextStyle(
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,

View File

@@ -1,9 +1,12 @@
/// Widget: Promotion Slider /// Widget: Promotion Slider
/// ///
/// Horizontal scrolling list of promotional banners. /// Auto-sliding carousel of promotional banners.
/// Displays promotion images, titles, and descriptions. /// Displays promotion images, titles, and descriptions.
/// Auto-advances every 4 seconds with smooth animation.
library; library;
import 'dart:async';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart';
@@ -14,13 +17,15 @@ import 'package:worker/features/home/domain/entities/promotion.dart';
/// Promotion Slider Widget /// Promotion Slider Widget
/// ///
/// Displays a horizontal scrollable list of promotion cards. /// Displays an auto-sliding carousel of promotion cards.
/// Each card shows an image, title, and brief description. /// Each card shows an image, title, and brief description.
class PromotionSlider extends StatelessWidget { /// Auto-advances every 4 seconds with page indicators.
class PromotionSlider extends StatefulWidget {
const PromotionSlider({ const PromotionSlider({
super.key, super.key,
required this.promotions, required this.promotions,
this.onPromotionTap, this.onPromotionTap,
this.autoSlideDuration = const Duration(seconds: 4),
}); });
/// List of promotions to display /// List of promotions to display
@@ -29,9 +34,56 @@ class PromotionSlider extends StatelessWidget {
/// Callback when a promotion is tapped /// Callback when a promotion is tapped
final void Function(Promotion promotion)? onPromotionTap; final void Function(Promotion promotion)? onPromotionTap;
/// Duration between auto-slides
final Duration autoSlideDuration;
@override
State<PromotionSlider> createState() => _PromotionSliderState();
}
class _PromotionSliderState extends State<PromotionSlider> {
late final ScrollController _scrollController;
Timer? _autoSlideTimer;
int _currentIndex = 0;
static const double _cardWidth = 280;
static const double _cardMargin = 12;
static const double _scrollOffset = _cardWidth + _cardMargin;
@override
void initState() {
super.initState();
_scrollController = ScrollController();
_startAutoSlide();
}
@override
void dispose() {
_autoSlideTimer?.cancel();
_scrollController.dispose();
super.dispose();
}
void _startAutoSlide() {
if (widget.promotions.length <= 1) return;
_autoSlideTimer = Timer.periodic(widget.autoSlideDuration, (_) {
if (!mounted) return;
_currentIndex = (_currentIndex + 1) % widget.promotions.length;
final targetOffset = _currentIndex * _scrollOffset;
_scrollController.animateTo(
targetOffset,
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
);
});
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (promotions.isEmpty) { if (widget.promotions.isEmpty) {
return const SizedBox.shrink(); return const SizedBox.shrink();
} }
@@ -45,7 +97,7 @@ class PromotionSlider extends StatelessWidget {
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: 16), padding: const EdgeInsets.symmetric(horizontal: 16),
child: Text( child: Text(
'Chương trình ưu đãi', 'Tin tức nổi bật',
style: TextStyle( style: TextStyle(
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
@@ -55,22 +107,22 @@ class PromotionSlider extends StatelessWidget {
), ),
const SizedBox(height: 12), const SizedBox(height: 12),
SizedBox( SizedBox(
height: 210, // 140px image + 54px text area height: 210,
child: ListView.builder( child: ListView.builder(
controller: _scrollController,
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16), padding: const EdgeInsets.symmetric(horizontal: 16),
itemCount: promotions.length, itemCount: widget.promotions.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
return _PromotionCard( return _PromotionCard(
promotion: promotions[index], promotion: widget.promotions[index],
onTap: () { onTap: () {
if (onPromotionTap != null) { if (widget.onPromotionTap != null) {
onPromotionTap!(promotions[index]); widget.onPromotionTap!(widget.promotions[index]);
} else { } else {
// Navigate to promotion detail page
context.pushNamed( context.pushNamed(
RouteNames.promotionDetail, RouteNames.promotionDetail,
extra: promotions[index], extra: widget.promotions[index],
); );
} }
}, },