official_theme_grid.dart 3.03 KB
import 'package:flutter/material.dart';
import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';

import '../models/watch_theme_models.dart';
import 'watch_theme_character_avatar.dart';
import 'watch_theme_colors.dart';
import 'watch_theme_selected_view.dart';
import 'watch_theme_section_card.dart';

class OfficialThemeGrid extends StatelessWidget {
  const OfficialThemeGrid({
    super.key,
    required this.themes,
    required this.activeThemeId,
    required this.onThemeTap,
  });

  final List<WatchThemeItem> themes;
  final int? activeThemeId;
  final ValueChanged<int> onThemeTap;

  @override
  Widget build(BuildContext context) {
    return WatchThemeSectionCard(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          WatchThemeSectionTitle(context.l10n.watchThemeOfficialTheme),
          SizedBox(height: 22),
          themes.isEmpty
              ? SizedBox(
                  height: 114,
                )
              : GridView.builder(
                  shrinkWrap: true,
                  padding: EdgeInsets.zero,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: themes.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    mainAxisSpacing: 21,
                    crossAxisSpacing: 19,
                    mainAxisExtent: 114,
                  ),
                  itemBuilder: (context, index) {
                    final theme = themes[index];
                    return GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () => onThemeTap(index),
                      child: Column(
                        children: [
                          WatchThemeSelectedView(
                            selected:
                                theme.id != null && theme.id == activeThemeId,
                            size: 88,
                            child: WatchThemeCharacterAvatar(
                              size: 88,
                              padding: 8,
                              assetPath: theme.infoList.firstOrNull?.assetPath,
                              imageUrl: theme.infoList.firstOrNull?.imgUrl,
                            ),
                          ),
                          SizedBox(height: 8),
                          Text(
                            theme.title,
                            textAlign: TextAlign.center,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                              color: WatchThemeColors.textPrimary,
                              fontSize: 12,
                              fontWeight: FontWeight.w400,
                              height: 1.25,
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
        ],
      ),
    );
  }
}