report_an_issue_dialog.dart

Go to the documentation of this file.

import 'dart:io';
 
import 'package:connect/core/localization/app_localizations.dart';
 
import '/core/ui/theme/color_palette.dart';
import '/core/ui/widgets/custom_action_slider.dart';
import '/core/ui/widgets/custom_scaffold.dart';
import '/core/ui/widgets/custom_snackbar.dart';
import '/core/ui/widgets/custom_text_form_field.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:hugeicons/hugeicons.dart';
import 'package:image_picker/image_picker.dart';
 
class ReportAnIsueDialog extends StatefulWidget {
  const ReportAnIsueDialog({super.key});
 
  @override
  State<ReportAnIsueDialog> createState() => _ReportAnIsueDialogState();
}
 
class _ReportAnIsueDialogState extends State<ReportAnIsueDialog> {
  final _formKey = GlobalKey<FormState>();
  final ImagePicker _picker = ImagePicker();
  List<File> _selectedImages = [];
 
  Future<void> _pickImage() async {
    final XFile? pickedFile = await _picker.pickImage(
      source: ImageSource.gallery,
      imageQuality: 80,
    );
 
    if (pickedFile != null) {
      setState(() {
        _selectedImages.add(File(pickedFile.path));
      });
    }
  }
 
  void _removeImage(int index) {
    setState(() {
      _selectedImages.removeAt(index);
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(
        vertical: 5.sp,
        horizontal: 5.sp,
      ),
      child: Form(
        key: _formKey,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            children: [
              CustomTextFormField(
                controller: TextEditingController(),
                hintText: AppLocalizations.of(context).translate('Subject'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return AppLocalizations.of(context)
                        .translate('Please enter the subject');
                  }
                  return null;
                },
              ),
              SizedBox(height: 15.sp),
              CustomTextFormField(
                controller: TextEditingController(),
                hintText: AppLocalizations.of(context).translate('Description'),
                maxLines: 5,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return AppLocalizations.of(context)
                        .translate('Please describe the issue');
                  }
                  return null;
                },
              ),
              SizedBox(height: 15.sp),
              Text(
                AppLocalizations.of(context).translate('Screenshots'),
                style: Theme.of(context).textTheme.bodySmall?.copyWith(
                      color: Theme.of(context).hintColor,
                    ),
              ),
              SizedBox(height: 10.sp),
              SizedBox(
                height: 80.sp,
                child: ListView.separated(
                  scrollDirection: Axis.horizontal,
                  itemCount: _selectedImages.length + 1,
                  separatorBuilder: (context, index) => SizedBox(width: 10.sp),
                  itemBuilder: (context, index) {
                    if (index == _selectedImages.length) {
                      return GestureDetector(
                        onTap: _pickImage,
                        child: Container(
                          width: 80.sp,
                          height: 80.sp,
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Theme.of(context).hintColor,
                              width: 0.4,
                            ),
                            borderRadius: BorderRadius.circular(10),
                          ),
                          child: const Icon(
                            HugeIcons.strokeRoundedCamera01,
                          ),
                        ),
                      );
                    }
 
                    // Display selected image
                    return Stack(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(10),
                          child: Image.file(
                            _selectedImages[index],
                            width: 80.sp,
                            height: 80.sp,
                            fit: BoxFit.cover,
                          ),
                        ),
                        Positioned(
                          top: 5,
                          right: 5,
                          child: GestureDetector(
                            onTap: () => _removeImage(index),
                            child: CircleAvatar(
                              backgroundColor:
                                  Theme.of(context).colorScheme.error,
                              radius: 12,
                              child: Icon(
                                HugeIcons.strokeRoundedCancel01,
                                size: 16.sp,
                                color: Theme.of(context).colorScheme.onPrimary,
                              ),
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              ),
              SizedBox(height: 20.sp),
              CustomSliderV2(
                action: (action) {
                  if (_formKey.currentState!.validate()) {
                    if (_selectedImages.isEmpty) {
                      CustomSnackBar.display(
                        context,
                        ColorPalette.red,
                        AppLocalizations.of(context).translate(
                            'Please upload at least one screenshot of the issue'),
                      );
                      return;
                    } else {
                      context.pop();
                      CustomSnackBar.display(
                        context,
                        ColorPalette.darkGreen,
                        AppLocalizations.of(context).translate(
                            'Your report has been successfully submitted. Our team will review it and get back to you shortly'),
                      );
                    }
                  }
                },
                text: AppLocalizations.of(context).translate('SUBMIT'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}