Wallpaper-Genie/lib/page/ai_setting/ai_setting_view.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wallpaperx/common/components/navigation_bar/base_appbar.dart';
import 'package:wallpaperx/page/ai_setting/ai_setting_controller.dart';
import 'package:wallpaperx/res/values/strings.dart';

class AiSettingView extends GetView<AiSettingController> {
  const AiSettingView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: BaseAppBar(
        appName,
        backgroundColor: Colors.black,
        titleStyle: TextStyle(
          color: Colors.white,
          fontSize: 24.sp,
        ),
      ),
      body: Container(
        padding: const EdgeInsets.all(15).w,
        child: Obx(
          () => Column(
            children: [
              _buildSettingLabel(),
              15.verticalSpace,
              _buildLabelOption(),
              15.verticalSpace,
              _buildApply(),
              15.verticalSpace,
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSettingLabel() {
    return Container(
      height: 150.w,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10).r,
        border: Border.all(color: Colors.grey),
      ),
      child: ListView(
        padding: const EdgeInsets.all(8).w,
        children: [
          Wrap(
            spacing: 3.w,
            runSpacing: 3.w,
            children: controller.labelSettingList
                .map((e) => labelSettingItem(e))
                .toList(),
          ),
        ],
      ),
    );
  }

  Widget labelSettingItem(label) {
    return GestureDetector(
      onTap: () => controller.removeLabel(label),
      child: Container(
        padding: const EdgeInsets.symmetric(
          vertical: 5,
          horizontal: 8,
        ).w,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50).r,
          border: Border.all(color: Colors.grey),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              label,
              style: const TextStyle(color: Colors.white),
            ),
            const Icon(
              Icons.close,
              color: Colors.white,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLabelOption() {
    return Expanded(child: Container(
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10).r,
        border: Border.all(color: Colors.grey),
      ),
      child: ListView(
        padding: const EdgeInsets.all(8).w,
        children: [
          Wrap(
            spacing: 3.w,
            runSpacing: 3.w,
            children: controller.labelOptionList
                .map((e) => labelOptionItem(e))
                .toList(),
          ),
        ],
      ),
    ),);
  }

  Widget labelOptionItem(label) {
    return GestureDetector(
      onTap: () => controller.addLabel(label),
      child: Container(
        margin: EdgeInsets.only(right: 3.w),
        padding: const EdgeInsets.symmetric(
          vertical: 5,
          horizontal: 8,
        ).w,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50).r,
          border: Border.all(color: Colors.grey),
        ),
        child: Text(
          label,
          style: const TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    );
  }

  Widget _buildApply() {
    return GestureDetector(
      onTap: controller.setLabelSetting,
      child: Container(
        padding: EdgeInsets.symmetric(
          vertical: 10.w,
          horizontal: 15.w,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50).r,
          color: Colors.white,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Apply",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Colors.black87,
                fontSize: 16.sp,
              ),
            ),
          ],
        ),
      ),
    );
  }
}