fcs/lib/pages/signin/pinlogin_page.dart

import 'package:fcs/helpers/theme.dart';
import 'package:fcs/pages/widgets/local_app_bar.dart';
import 'package:fcs/pages/widgets/local_button.dart';
import 'package:fcs/pages/widgets/local_text.dart';
import 'package:fcs/pages/widgets/progress.dart';
import 'package:flutter/material.dart';
import 'package:pin_input_text_field/pin_input_text_field.dart';

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

  @override
  State<PinLoginPage> createState() => _PinLoginPageState();
}

class _PinLoginPageState extends State<PinLoginPage> {
  bool _isLoading = false;
  late String pin;
  TextEditingController _fcsIdCtl = new TextEditingController();

  @override
  void initState() {
    pin = "";
    super.initState();
  }

  Widget build(BuildContext context) {
    final fcsIdBox = TextFormField(
      controller: _fcsIdCtl,
      autofocus: true,
      style: TextStyle(
          fontSize: 15, color: Colors.black87, fontWeight: FontWeight.w500),
      cursorColor: primaryColor,
      keyboardType: TextInputType.text,
      decoration: new InputDecoration(
        contentPadding: EdgeInsets.all(0),
        labelStyle: newLabelStyle(color: Colors.black54, fontSize: 17),
        enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: primaryColor, width: 1.0)),
        focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: primaryColor, width: 1.0)),
        disabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: primaryColor, width: 1.0)),
      ),
    );

    final pinLoginLogo = Container(
      width: 70,
      height: 70,
      child: FittedBox(
        child: Image.asset(
          "assets/logo.jpg",
        ),
        fit: BoxFit.fitHeight,
      ),
    );

    final loginBtn = Padding(
      padding: EdgeInsets.only(top: 30),
      child: LocalButton(
        textKey: "welcome.pinlogin",
        callBack: () {},
      ),
    );
    return LocalProgress(
      inAsyncCall: _isLoading,
      child: new Scaffold(
          appBar: LocalAppBar(
            backgroundColor: null,
            arrowColor: Colors.black,
          ),
          body: ListView(
            padding: EdgeInsets.only(top: 20, left: 15, right: 15, bottom: 20),
            children: [
              pinLoginLogo,
              Padding(
                padding: EdgeInsets.only(top: 20, bottom: 20),
                child: Center(
                  child: LocalText(context, "welcome.pinlogin",
                      color: Colors.black, fontSize: 18),
                ),
              ),
              LocalText(
                context,
                "welcome.pinlogin.fcsid",
                color: Colors.black54,
                fontSize: 15,
              ),
              fcsIdBox,
              Padding(
                  padding: EdgeInsets.only(top: 25, bottom: 20),
                  child: LocalText(
                    context,
                    "welcome.pinlogin.pin",
                    color: Colors.black54,
                    fontSize: 15,
                  )),
              PinInputTextField(
                cursor: Cursor(
                    color: primaryColor, enabled: true, width: 2, height: 23),
                pinLength: 6,
                decoration: BoxLooseDecoration(
                    strokeColorBuilder: PinListenColorBuilder(
                        primaryColor, Colors.grey.shade400)),
                textInputAction: TextInputAction.done,
                autoFocus: false,
                onChanged: _pinChange,
              ),
              loginBtn,
            ],
          )),
    );
  }

  _pinChange(pin) {
    setState(() {
      this.pin = pin;
    });
  }
}