패키지, 저장소 및 앱 카테고리 검색

custom_pin_screen 표지
패키지 상세v1.0.1

custom_pin_screen

모바일 애플리케이션에 사용자 정의 키보드와 핀을 갖춘 화면을 추가할 수 있는 플러터 패키지입니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
429
좋아요
49
Pub 점수
160

패키지 설치

flutter pub add custom_pin_screen

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

모바일 및 데스크톱 애플리케이션용 사용자 지정 가능한 핀 입력 화면과 맞춤형 키보드를 구현할 수 있도록 해주는 플러터 패키지입니다. PIN, OTP, 비밀번호에 대한 안전한 입력 처리를 지원하며 디자인과 동작에서 유연성을 제공합니다. 이 패키지는 안드로이드, iOS, 웹, 맥OS, 윈도우, 리눅스에 원활하게 통합되어 숫자 또는 사용자 정의 입력이 필요한 인증 흐름에 이상적입니다. 스타일링, 검증 및 콜백 처리를 위한 깔끔한 API를 제공합니다.

사용 사례

  • PIN 코드를 사용한 사용자 인증
  • 일회용 비밀번호 (OTP) 입력
  • 보안 비밀번호 입력 필드
  • 양식용 사용자 정의 키보드 레이아웃
  • 다중 플랫폼 앱 일관성

주요 기능

  • 사용자 정의 키보드 레이아웃
  • 크로스 플랫폼 지원
  • 보안 입력 처리
  • 사용자 정의 핀 길이
  • 변경 및 완료 콜백
  • 기존 UI와의 간편한 통합

적합한 대상

  • 인증 흐름을 구축하는 개발자
  • 보안 숫자 입력이 필요한 앱
  • 다중 플랫폼을 대상으로 하는 프로젝트
  • 재사용 가능한 핀 컴포넌트를 원하는 팀
  • 사용자 경험 중심의 폼 구현

고려 사항

  • 보안 최선의 실천 방법을 수동으로 처리해야 합니다
  • 길이를 넘어서는 내장 검증은 제한적
  • 복잡한 디자인을 위해 추가 스타일링이 필요할 수 있습니다
  • 비숫자 입력에 최적화되지 않음
  • 플랫폼 고유의 렌더링 동작에 따라 달라집니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

🔐 custom pin screen

codecov CI license PRs Welcome GitHub contributors GitHub last commit

A flutter package to add screens with custom keyboards and pins to your mobile application.

🎖 Installing

dependencies:
  custom_pin_screen: "^1.0.0"
⚡️ Import
import 'package:custom_pin_screen/custom_pin_screen.dart';

🎮 How To Use

Dart Usage
  • Pin Auth
onPressed: (){
    Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => PinAuthentication(
                      onChanged: (v) {
                        if (kDebugMode) {
                          print(v);
                        }
                      },
                      onSpecialKeyTap: () {},
                      specialKey: const SizedBox(),
                      useFingerprint: true,
                      onbuttonClick: () {},
                      submitLabel: const Text(
                        'Submit',
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                    ),
                  ),
                );
    },
  • Custom Keyboard
Column(
        children: [
          const Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 35.0,
              vertical: 35.0,
            ),
            child: Text(
              "How much do you want to fund your wallet with",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.blue,
                fontWeight: FontWeight.w700,
                fontSize: 18,
              ),
            ),
          ),
          Expanded(
              child: CustomAppKeyBoard(
            onChanged: (v) {
              if (kDebugMode) {
                print(v);
              }
            },
            onbuttonClick: () {
              if (kDebugMode) {
                print('clicked');
              }
            },
            maxLength: 4,
            submitLabel: const Text(
              'Proceed',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w700,
                fontSize: 18,
              ),
            ),
            // ),
          ))
        ],
      )

For more info, please, refer to the main.dart in the example.

📸 ScreenShots

🐛 Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on Github and I'll look into it. Pull request are also welcome.

❗️ Note

This project is a starting point for a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

🤓 Developer(s)

Abada Samuel Oghenero

⭐️ License

MIT LICENSE

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.