[UI] input text 컴포넌트

[Ko-Eunseo]

30

SLInput

가장 기본적인 input 형태입니다. 아래는 예시입니다.

final formKey = GlobalKey<FormState>();
Form(
  key: formKey,
  child: Column(
    children: [
      SLInput(
        controller: controller,
        validator: (value) {
          if (value == null || value.length < 8) {
            print(value);
            return '현재 비밀번호를 다시 입력해주세요.';
          }
          return null;
        },
        hintText: '비밀번호',
        obscureText: true,
      ),
      const SizedBox(height: 10),
      SLInput(
        controller: controller,
        hintText: '직무와 관련된 교육 내용및 활동을 입력해주세요.',
        maxLines: 5,
      ),
      const SizedBox(height: 10),
      SLInput(
        maxLength: 10,
        fillColor: Colors.transparent,
        controller: controller,
        borderType: SLInputBorderType.underline,
        hintText: '닉네임을 입력해주세요',
        hintStyle: SLTextStyle.Text_L_Regular?.copyWith(
            color: SLColor.neutral.shade50),
        isCenteredText: true,
      ),
      const SizedBox(height: 10),
      SLInput(
        fillColor: Colors.transparent,
        controller: controller,
        borderType: SLInputBorderType.underline,
        hintText: '인증번호를 입력해주세요',
      ),
      const SizedBox(height: 10),
      const SizedBox(height: 10),
      ElevatedButton(
        onPressed: () {
          if (formKey.currentState?.validate() ?? false) {
            // Form is valid, you can proceed with further actions
          }
        },
        child: const Text('Submit'),
      ),
    ],
  ),
),

ValidateInput

온보딩 회원가입에서 사용하는 input 컴포넌트입니다. ValidateInputType을 받습니다. 또, validator를 함께 전달해야 합니다.

return Form(
  key: formKey,
  child: ValidateInput(
    type: ValidateInputType.passwordConfirm,
    controller: controller,
    validator: (value) {
      if (value == null || value.length < 8) {
        return '현재 비밀번호를 다시 입력해주세요.';
      }
      return null;
    },
  ),
);

InputWithTextButton

디폴트로 위 형태를 가진 컴포넌트입니다. hintText와 buttonText, onPressed, buttonTextStyle을 받습니다.

InputWithTextButton()