update text + slider
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
@@ -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],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user