watch_face_preview.dart 3.62 KB
import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

enum WatchFacePreviewType {
  surface,
  singleSmall,
  singleMedium,
  coupleSmall,
}

class WatchFacePreview extends StatelessWidget {
  const WatchFacePreview({
    super.key,
    this.type = WatchFacePreviewType.singleMedium,
    this.themeImageUrl,
    this.themeImageUrl2,
  });

  final String? themeImageUrl;
  final String? themeImageUrl2;
  final WatchFacePreviewType type;

  String get _backgroundAsset {
    if (type == WatchFacePreviewType.surface) {
      return 'assets/images/watch_theme/watch_theme_preview_surface.png';
    }
    if (type == WatchFacePreviewType.coupleSmall) {
      return 'assets/images/watch_theme/watch_theme_preview_couple.png';
    }
    return 'assets/images/watch_theme/watch_theme_preview_single.png';
  }

  Size get _previewSize {
    if (type == WatchFacePreviewType.singleMedium) {
      return Size(134, 160);
    }
    return Size(120, 136);
  }

  Size get _themeSize {
    if (type == WatchFacePreviewType.singleMedium) {
      return Size(78, 78);
    }
    if (type == WatchFacePreviewType.singleSmall) {
      return Size(55, 55);
    }
    if (type == WatchFacePreviewType.surface) {
      return Size(44, 44);
    }
    return Size(55, 55);
  }

  @override
  Widget build(BuildContext context) {
    final size = _previewSize;

    return SizedBox(
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Image(
            image: AssetImage(_backgroundAsset),
            width: size.width,
            height: size.height,
            fit: BoxFit.fitWidth,
          ),
          _buildThemeImages(),
        ],
      ),
    );
  }

  Widget _buildThemeImages() {
    final themeSize = _themeSize;

    if (type == WatchFacePreviewType.singleMedium) {
      return Positioned(
        top: 40,
        width: themeSize.width,
        height: themeSize.height,
        child: _buildFaceImage(themeImageUrl,
            'assets/images/watch_theme/official_default_green.png'),
      );
    }
    if (type == WatchFacePreviewType.singleSmall) {
      return Positioned(
        top: 36,
        width: themeSize.width,
        height: themeSize.height,
        child: _buildFaceImage(themeImageUrl,
            'assets/images/watch_theme/official_default_green.png'),
      );
    }
    if (type == WatchFacePreviewType.surface) {
      return Positioned(
        top: 90,
        left: 24,
        width: themeSize.width,
        height: themeSize.height,
        child: _buildFaceImage(themeImageUrl,
            'assets/images/watch_theme/official_default_green.png'),
      );
    }

    return Positioned(
      top: 30,
      child: Row(
        children: [
          SizedBox(
            width: themeSize.width,
            height: themeSize.height,
            child: _buildFaceImage(themeImageUrl,
                'assets/images/watch_theme/official_default_green.png'),
            ),
          SizedBox(
            width: 8,
          ),
          SizedBox(
            width: themeSize.width,
            height: themeSize.height,
            child: _buildFaceImage(themeImageUrl2,
                'assets/images/watch_theme/official_default_blue.png'),
          ),
        ],
      ),
    );
  }

  Widget _buildFaceImage(String? themeUrl, String placeholder) {
    if (themeUrl != null && themeUrl.isNotEmpty) {
      if (themeUrl.isURL) {
        return CachedNetworkImage(imageUrl: themeUrl);
      }
      return Image.file(File(themeUrl), fit: BoxFit.cover);
    }
    return Image.asset(
      placeholder,
      fit: BoxFit.cover,
    );
  }
}