chatapp3-flutter/lib/modules/room/background/room_background_upload_page.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_picker/image_picker.dart';
import 'package:yumi/app/constants/sc_global_config.dart';
import 'package:yumi/app/routes/sc_fluro_navigator.dart';
import 'package:yumi/app_localizations.dart';
import 'package:yumi/ui_kit/components/appbar/socialchat_appbar.dart';
import 'package:yumi/ui_kit/theme/socialchat_theme.dart';

class RoomBackgroundUploadPage extends StatefulWidget {
  const RoomBackgroundUploadPage({super.key});

  @override
  State<RoomBackgroundUploadPage> createState() =>
      _RoomBackgroundUploadPageState();
}

class _RoomBackgroundUploadPageState extends State<RoomBackgroundUploadPage> {
  final ImagePicker _picker = ImagePicker();
  File? _selectedImage;

  Future<void> _pickImage() async {
    final pickedFile = await _picker.pickImage(
      source: ImageSource.gallery,
      imageQuality: 90,
      maxWidth: 1920,
      maxHeight: 1080,
    );
    if (pickedFile == null || !mounted) {
      return;
    }

    setState(() {
      _selectedImage = File(pickedFile.path);
    });
  }

  @override
  Widget build(BuildContext context) {
    final localizations = SCAppLocalizations.of(context)!;
    return Stack(
      children: [
        Image.asset(
          SCGlobalConfig.businessLogicStrategy.getLanguagePageBackgroundImage(),
          width: ScreenUtil().screenWidth,
          height: ScreenUtil().screenHeight,
          fit: BoxFit.fill,
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: SocialChatStandardAppBar(
            title: localizations.customBackground,
            actions: const [],
            backButtonColor: Colors.white,
            backgroundColor: Colors.transparent,
          ),
          body: Container(
            color: const Color(0xff0F0F0F),
            child: SingleChildScrollView(
              padding: EdgeInsets.fromLTRB(18.w, 20.w, 18.w, 28.w),
              child: Column(
                children: [
                  GestureDetector(
                    onTap: _pickImage,
                    child: Container(
                      width: 132.w,
                      height: 170.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(14.w),
                        color: const Color(0xff143B34),
                        border: Border.all(
                          color: SocialChatTheme.primaryLight,
                          width: 1.w,
                        ),
                      ),
                      child:
                          _selectedImage != null
                              ? ClipRRect(
                                borderRadius: BorderRadius.circular(14.w),
                                child: Image.file(
                                  _selectedImage!,
                                  fit: BoxFit.cover,
                                ),
                              )
                              : Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Icon(
                                    Icons.file_upload_outlined,
                                    color: Colors.white,
                                    size: 28.w,
                                  ),
                                  SizedBox(height: 10.w),
                                  Text(
                                    localizations.goToUpload,
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 13.sp,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ],
                              ),
                    ),
                  ),
                  SizedBox(height: 16.w),
                  Text(
                    localizations.pleaseUploadAccordingToExample,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white54,
                      fontSize: 13.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  SizedBox(height: 20.w),
                  Text(
                    localizations.example,
                    style: TextStyle(
                      color: SocialChatTheme.primaryLight,
                      fontSize: 18.sp,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  SizedBox(height: 16.w),
                  Row(
                    children: [
                      Expanded(child: _RoomBackgroundExampleCard()),
                      SizedBox(width: 16.w),
                      Expanded(child: _RoomBackgroundExampleCard()),
                    ],
                  ),
                  SizedBox(height: 16.w),
                  Text(
                    localizations.approvedWithinOneMinute,
                    style: TextStyle(
                      color: const Color(0xffF26F6F),
                      fontSize: 13.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  SizedBox(height: 28.w),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap:
                        _selectedImage == null
                            ? null
                            : () => SCNavigatorUtils.goBackWithParams(
                              context,
                              _selectedImage!.path,
                            ),
                    child: Opacity(
                      opacity: _selectedImage == null ? 0.45 : 1,
                      child: Container(
                        height: 48.w,
                        width: double.infinity,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(999.w),
                          gradient: LinearGradient(
                            colors: [
                              SocialChatTheme.primaryLight,
                              const Color(0xff8BF2D0),
                            ],
                          ),
                        ),
                        child: Text(
                          localizations.save,
                          style: TextStyle(
                            color: const Color(0xff0B2823),
                            fontSize: 16.sp,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class _RoomBackgroundExampleCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final localizations = SCAppLocalizations.of(context)!;
    return Container(
      height: 300.w,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(14.w),
        color: const Color(0xff143B34),
      ),
      child: Stack(
        children: [
          Positioned.fill(
            child: Icon(
              Icons.image_outlined,
              size: 42.w,
              color: Colors.white.withValues(alpha: 0.12),
            ),
          ),
          Positioned(
            left: 12.w,
            right: 12.w,
            bottom: 18.w,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 8.w),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(999.w),
                border: Border.all(
                  color: SocialChatTheme.primaryLight,
                  width: 1.w,
                ),
                color: const Color(0xff1B4A40),
              ),
              child: Text(
                localizations.staticOrGifImage,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 11.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}