GSFV2/gsf/lib/views/pages/MenstrualCycleTracker/SecondQuestion.dart

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:get/get.dart';
import 'package:gsp_app/views/components/appbar.dart';
import 'package:gsp_app/views/pages/MenstrualCycleTracker/TrackerHomePage.dart';

import 'viewModel/StoringDates.dart';

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

  @override
  State<SecondQuestion> createState() => _SecondQuestionState();
}

class _SecondQuestionState extends State<SecondQuestion> {
  final periodCycleLength = TextEditingController();
  bool showTextField = false;

  _validateAnswer() {
    String answer = periodCycleLength.text;
    int? intValue = int.tryParse(answer);

    if (intValue != null && intValue >= 21 && intValue <= 100) {
      helperController.periodCycleLength.value =
          int.parse(periodCycleLength.text);
      Get.to(() => TrackerHomePage());
    } else {
      // Value is outside the valid range
      Fluttertoast.showToast(
        msg: 'Value must be between 21 to 100 days.',
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.BOTTOM,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(60),
        child: CustomAppBars(
          titleHead: 'Menstrual Cycle Tracker',
        ),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: GestureDetector(
            onTap: () {
              FocusManager.instance.primaryFocus?.unfocus();
            },
            child: Container(
              width: double.infinity,
              decoration: const BoxDecoration(
                color: Color(0xFF383838), // Set the background color
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(12.0),
                  topRight: Radius.circular(12.0),
                ),
              ),
              child: Column(
                children: [
                  const SizedBox(
                    height: 64,
                  ),
                  Image.asset(
                    'assets/image/cycle_time.png',
                    height: 64,
                    width: 64,
                  ),
                  const SizedBox(
                    height: 31,
                  ),
                  const Text(
                    "How long do your Cycle usually last?",
                    style: TextStyle(fontSize: 18),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Container(
                    width: 147,
                    height: 43,
                    decoration: ShapeDecoration(
                      color: const Color(0xFFBBF046),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(25.50),
                      ),
                    ),
                    child: Center(
                      child: showTextField
                          ? GestureDetector(
                              onTap: () {
                                setState(() {
                                  showTextField = !showTextField;
                                });
                              },
                              child: const Text(
                                'Period Length',
                                style: TextStyle(
                                  fontSize:
                                      14, // Adjust the font size as needed
                                  color: Colors.black,
                                ),
                              ))
                          : TextFormField(
                              //textAlign: TextAlign.center,
                              autofocus: true,
                              maxLength: 3,
                              keyboardType: TextInputType.number,
                              controller: periodCycleLength,
                              decoration: const InputDecoration(
                                border: InputBorder.none,
                                counterText: '', // Hide the character counter
                                contentPadding:
                                    EdgeInsets.only(left: 60, right: 10),
                              ),
                              style: const TextStyle(
                                // Adjust the text style as needed
                                color: Colors.black,
                              ),
                              onChanged: (value) {
                                if (value.isEmpty) {
                                  setState(() {
                                    showTextField = !showTextField;
                                  });
                                }
                              },
                            ),
                    ),
                  ),
                  const SizedBox(
                    height: 5,
                  ),
                  const Text(
                    "Days",
                    style: TextStyle(fontSize: 16),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  const Padding(
                    padding: EdgeInsets.symmetric(horizontal: 14),
                    child: Text(
                      "From the day one period starts until the next one starts.",
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                  const SizedBox(
                    height: 100,
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 15),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        GestureDetector(
                          onTap: () {
                            Get.back();
                          },
                          child: Container(
                            width: 147,
                            height: 39,
                            decoration: ShapeDecoration(
                              color: const Color(0xFFBBF046),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(25.50),
                              ),
                            ),
                            child: const Center(
                                child: Text(
                              "Back",
                              style: TextStyle(color: Colors.black),
                            )),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            _validateAnswer();
                          },
                          child: Container(
                            width: 147,
                            height: 39,
                            decoration: ShapeDecoration(
                              shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                    width: 1, color: Colors.white),
                                borderRadius: BorderRadius.circular(25.50),
                              ),
                            ),
                            child: const Center(child: Text("Next")),
                          ),
                        )
                      ],
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}