Wallpaper-Genie/lib/page/recommend/recommend_view.dart

import 'dart:ui';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:photo_view/photo_view.dart';
import 'package:wallpaperx/common/components/custom_stacked_list_widget.dart';
import 'package:wallpaperx/common/components/image_network_widget.dart';
import 'package:wallpaperx/common/components/navigation_bar/search_appbar.dart';
import 'package:wallpaperx/common/components/refresh/base_easyrefresh.dart';
import 'package:wallpaperx/common/components/view_state_widget.dart';
import 'package:wallpaperx/entity/image_model.dart';
import 'package:wallpaperx/generated/assets.dart';
import 'package:wallpaperx/res/themes/app_sizes.dart';
import 'package:wallpaperx/res/values/strings.dart';

import 'recommend_controller.dart';

class RecommendView extends GetView<RecommendController> {
  const RecommendView({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(RecommendController());
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: PageView(
        scrollDirection: Axis.vertical,
        children: [
          _buildPhotoView(context),
          _buildMasonryGridView(context),
        ],
      ),
    );
  }

  Widget _buildPhotoView(context) {
    return Stack(
      children: [
        GetBuilder<RecommendController>(
          id: 'discover_background',
          builder: (logic) {
            return Container(
              clipBehavior: Clip.hardEdge,
              width: double.infinity,
              height: double.infinity,
              decoration: const BoxDecoration(
                color: Colors.black87,
              ),
              child: ImageFiltered(
                imageFilter: ImageFilter.blur(
                  sigmaX: 40,
                  sigmaY: 40,
                  tileMode: TileMode.decal,
                ),
                child: controller.banners.isEmpty
                    ? Image.asset(
                        Assets.imagesRecommendTopBackground,
                      )
                    : ImageNetworkWidget(
                        url:
                            controller.banners[controller.index.value].imageUrl,
                        radius: 30.r,
                        width: 300.w,
                        height: 500.w,
                        fit: BoxFit.cover,
                      ),
              ),
            );
          },
        ),
        Container(
          height: double.infinity,
          width: double.infinity,
          padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top).w,
          child: Column(
            children: [
              SearchAppbar(
                onTapToSearch: controller.toSearch,
                onTapToCategory: controller.homeController.openHomeDrawer,
                title: appName,
                showDown: false,
                titleStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 24.sp,
                  fontWeight: FontWeight.w600,
                ),
              ),
              18.verticalSpace,
              Expanded(
                child: Obx(
                  () => controller.banners.isEmpty
                      ? loadingViewV1(color: Colors.white)
                      : StackedListWidget(
                          listItems: controller.banners
                              .asMap()
                              .entries
                              .map(
                                (e) => Container(
                                  key: Key(e.key.toString()),
                                  child: ImageNetworkWidget(
                                    url: controller.banners[e.key].imageUrl,
                                    radius: 30.r,
                                    width: 300.w,
                                    height: 500.w,
                                    fit: BoxFit.fitHeight,
                                  ),
                                ),
                              )
                              .toList(),
                          listItemWidth: 200.w,
                          animationDuration: const Duration(milliseconds: 350),
                          borderRadius: BorderRadius.circular(30.r),
                          rotationAngle: 4,
                          additionalTranslateOffsetBeyondScreen: -92,
                          onIndexChanged: controller.onIndexChanged,
                          focusedItemShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.26),
                              blurRadius: 28,
                              spreadRadius: 8,
                              offset: const Offset(8, 16),
                            ),
                            BoxShadow(
                              color: Colors.black.withOpacity(0.26),
                              blurRadius: 28,
                              spreadRadius: 8,
                              offset: const Offset(-8, 2),
                            ),
                          ],
                        ),
                ),
              ),
              18.verticalSpace,
              Image.asset(
                width: 24.w,
                Assets.iconUp,
              ),
              SizedBox(height: MediaQuery.of(context).padding.bottom + 72.w)
            ],
          ),
        )
      ],
    );
  }

  Widget _buildMasonryGridView(context) {
    return Container(
      height: double.infinity,
      width: double.infinity,
      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top).w,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage(Assets.imagesRecommendBottomBackground),
          fit: BoxFit.cover,
        ),
      ),
      child: Column(
        children: [
          SearchAppbar(
            onTapToSearch: controller.toSearch,
            onTapToCategory: controller.homeController.openHomeDrawer,
            title: appName,
            titleStyle: TextStyle(
              color: Colors.white,
              fontSize: 24.sp,
              fontWeight: FontWeight.w600,
            ),
          ),
          Obx(() {
            return Expanded(
              child: BaseEasyRefresh(
                controller: controller.refreshController,
                onLoad: controller.onLoad,
                viewState: controller.viewState.value,
                height: discoverListHeight,
                child: Scrollbar(
                  controller: controller.scrollController,
                  child: MasonryGridView.count(
                    controller: controller.scrollController,
                    itemCount: controller.images.length,
                    crossAxisCount: 2,
                    mainAxisSpacing: 15.w,
                    crossAxisSpacing: 15.w,
                    padding: const EdgeInsets.fromLTRB(15, 0, 15, 0).w,
                    itemBuilder: (context, index) {
                      ImageModel item = controller.images[index];
                      return GestureDetector(
                        onTap: () => controller.gridToImageDetail(index),
                        child: ImageNetworkWidget(
                          url: item.imageUrl,
                          aspectRatio: item.width! / item.height!,
                          radius: 15.r,
                        ),
                      );
                    },
                  ),
                ),
              ),
            );
          }),
        ],
      ),
    );
  }
}