fcs/lib/pages/widgets/input_phone.dart

import 'package:fcs/helpers/theme.dart';
import 'package:flutter/material.dart';
import 'package:country_picker/country_picker.dart';
import 'package:provider/provider.dart';

import '../../localization/app_translations.dart';
import '../main/model/language_model.dart';

typedef OnValueChange = Function(Country country);

class InputPhone extends StatefulWidget {
  final String? lableKey;
  final String? validationLabel;
  final OnValueChange onValueChange;
  final Country selectedCountry;
  final TextEditingController phoneCtl;
  final Function(String)? onInputChanged;
  final bool autofocus;

  const InputPhone(
      {super.key,
      this.lableKey,
      required this.onValueChange,
      required this.selectedCountry,
      this.onInputChanged,
      required this.phoneCtl,
      this.validationLabel,
      this.autofocus = false});

  @override
  State<InputPhone> createState() => _InputPhoneState();
}

class _InputPhoneState extends State<InputPhone> {
  List<String>? signinCountries = [];

  @override
  void initState() {
    init();
    super.initState();
  }

  init() {
    List<String>? countries = ['mm', 'us'];

    for (var c in countries) {
      setState(() {
        signinCountries?.add(c.toUpperCase());
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    bool isMyanmar = widget.selectedCountry.phoneCode == "95";
    var languageModel = Provider.of<LanguageModel>(context);

    return Padding(
      padding: const EdgeInsets.only(top: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: () {
                  showCountryPicker(
                    context: context,
                    countryFilter: signinCountries,
                    showPhoneCode: true,
                    showSearch: true,
                    countryListTheme: const CountryListThemeData(
                        flagSize: 25,
                        backgroundColor: Colors.white,
                        textStyle: TextStyle(fontSize: 15, color: Colors.black),
                        bottomSheetHeight: 500,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(20.0),
                          topRight: Radius.circular(20.0),
                        ),
                        inputDecoration: InputDecoration(
                          labelText: 'Search',
                          labelStyle: TextStyle(color: Colors.black),
                          floatingLabelStyle: TextStyle(color: Colors.black),
                          hintText: 'Search',
                          hintStyle: TextStyle(color: Colors.black),
                          hintMaxLines: 1,
                          prefixIcon: Icon(Icons.search, color: Colors.black),
                          border: OutlineInputBorder(),
                          enabledBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(width: 1, color: Colors.black)),
                          focusedBorder: OutlineInputBorder(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(5.0)),
                              borderSide: BorderSide(color: Colors.black)),
                        ),
                        searchTextStyle: TextStyle(color: Colors.black)),
                    onSelect: (Country country) {
                      widget.onValueChange(country);
                    },
                  );
                },
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                      width: 95,
                      padding: const EdgeInsets.only(
                          left: 5, bottom: 12, right: 5, top: 12),
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey.shade400),
                        borderRadius: BorderRadius.circular(5),
                      ),
                      child: Row(
                        children: [
                          Container(
                              padding: const EdgeInsets.fromLTRB(0, 0, 5, 0),
                              child: Text(widget.selectedCountry.flagEmoji)),
                          Text(
                            isMyanmar
                                ? "+95"
                                : "+${widget.selectedCountry.phoneCode}",
                            style: const TextStyle(
                                fontSize: 16, color: Colors.black),
                          ),
                          const Icon(Icons.arrow_drop_down),
                        ],
                      ),
                    )
                  ],
                ),
              ),
              const SizedBox(width: 5),
              Flexible(
                child: Container(
                  padding: const EdgeInsets.only(left: 10),
                  child: TextFormField(
                    autofocus: widget.autofocus,
                    keyboardType: TextInputType.phone,
                    onChanged: widget.onInputChanged,
                    controller: widget.phoneCtl,
                    maxLines: 1,
                    cursorColor: primaryColor,
                    style: const TextStyle(fontSize: 16, color: Colors.black),
                    decoration: InputDecoration(
                        labelStyle: languageModel.isEng
                            ? newLabelStyle(color: Colors.black54, fontSize: 20)
                            : newLabelStyleMM(
                                color: Colors.black54, fontSize: 20),
                        labelText: widget.lableKey != null
                            ? AppTranslations.of(context)!
                                .text(widget.lableKey!)
                            : null,
                        hintStyle: const TextStyle(color: Color(0xFFBBBBBB)),
                        errorStyle: const TextStyle(color: dangerColor),
                        prefix: Padding(
                            padding: EdgeInsets.only(left: isMyanmar ? 0 : 13),
                            child: Text(isMyanmar ? "9 " : "",
                                style: const TextStyle(color: Colors.black))),
                        enabledBorder: const UnderlineInputBorder(
                            borderSide:
                                BorderSide(color: primaryColor, width: 1.0)),
                        focusedBorder: const UnderlineInputBorder(
                            borderSide:
                                BorderSide(color: primaryColor, width: 1.0)),
                        errorBorder: null,
                        focusedErrorBorder: null),
                    validator: (value) {
                      if (value!.isEmpty) {
                        if (widget.validationLabel == null) return null;
                        return AppTranslations.of(context)!
                            .text(widget.validationLabel!);
                      }
                      return null;
                    },
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}