플러터(Flutter) 회원가입 약관 동의 페이지 만들어 보기

 

PlayStore나 AppStore 어느 애플리케이션을 다운을 받아도 회원가입 약관 동의 페이지는 많이 봤을 것입니다.

스토어에 앱을 올릴때 회원가입/로그인/개인정보 등 사용자의 정보를 받아야 하게 된다면

필수적으로 개인정보처리방침을 넣어야만 승인을 해주기 때문이다. 그래서 이 페이지를 제작해 보려고 합니다.

 

동의를 위한 총 4개의 체크박스를 제작

평균적으로 체크박스는 3가지 타입의 유형을 따로 만들어 주어야 합니다.

1. 모두 동의 ( 모든 동의를 하는 체크박스 )
2. 필수 동의 ( 반드시 해야만 다음페이지 넘어갈 수 있다. )
3. 선택적 동의 ( 안해도 다음 페이지로 넘어 갈 수 있다. )

그리고 만약 필수 동의가 전부 체크가 되었다면 가입하기 버튼이 활성화 되어야 합니다.

자 그럼 이제 구현해야하는 원리는 대강 알았으니 하나씩 뜯고 씹어 맛을 봅시다.

 

---

 

1. 모두 동의 버튼 구현하기

조건문으로는 총 4가지 타입으로 간단합니다.

1. 모두 동의를 눌러 5개 체크박스를 모두 활성화 상태로 변경
2. 5개의 체크박스가 모두 활성화 된 상태일때 모두 동의를 다시 눌러 전체 해제
3. 4개 중 1개라도 선택이 되어 있지 않을 경우 모두 동의 체크박스 활성화 해제
4. 4개 체크박스가 전부 선택이 되어 있을 경우에 모두 동의 체크박스 활성화

 

2. 각각의 체크박스 버튼 구현하기

 

각각의 체크박스는 총 3가지 조건문으로 이루어지면 됩니다.

1. 버튼을 클릭했을 시 toggle (ON / OFF)
2. 필수 버튼이 전부 체크가 되었을 시 가입하기 버튼 활성화
3. 모두 동의 버튼을 클릭해서가 아닌 각각의 버튼을 눌러서 모두 체크가 되었을 시 모두 동의 버튼 활성화

 

일단 이로써 버튼의 트리거 부분은 끝났습니다.

이제 UI를 만들면서 이 트리거 부분만 잘 생각하면서 만들면 끝입니다. 이제 소스 코드를 봅시다.

 

https://dartpad.dev/?id=753b34cd5a6b6b861be6d1deee8af476

DartPad

 

위 코드는 내가 작성한 코드인데 쭉 읽어보면 크게 어려운 부분은 없습니다.

한가지 부분만 설명하자면 각 버튼을 클릭 할때마다 실행되는 _updateCheckState(int index)가 있습니다.

void _updateCheckState(int index) {
    setState(() {
      // 모두 동의 체크박스일 경우
      if (index == 0) {
        bool isAllChecked = !_isChecked.every((element) => element);
        _isChecked = List.generate(5, (index) => isAllChecked);
      } else {
        _isChecked[index] = !_isChecked[index];
        _isChecked[0] = _isChecked.getRange(1, 5).every((element) => element);
      }
    });
  }

 

if(index == 0) /  "모두 동의" 체크 박스 처리
1. _isChecked 리스트의 모든 항목이 체크되었는지 검사합니다. 모두 체크되어 있지 않다면 isAllChecked는 true가 됩니다.
2. _isChecked 리스트를 isAllChecked 값으로 재설정합니다. 즉, '모두 동의' 체크박스가 선택되면 모든 체크박스가 선택되고, 해제되면 모든 체크박스가 해제됩니다.

else (index != 0)
1. 선택된 체크박스의 상태를 토글합니다 (true면 false로, false면 true로).
2. getRange(1, 5)를 사용하여 '모두 동의' 체크박스를 제외한 나머지 체크박스가 모두 선택되어 있는지 확인합니다. 모두 선택되어 있다면 '모두 동의' 체크박스도 선택됩니다.

 

여기서 List.generate() 부분이 뭐냐!? 라고 하실 수 있는데 체크박스를 List 형태로 5개를 만들기 위해 사용하였습니다.

즉 0 - 4 까지 순서대로

0. 모두 동의 / 1. 만 14세 이상 / 2. 개인정보처리방침 / 3. 서비스 이용 약관 / 4. 이벤트 및 할인 혜택..

이렇게 생각하고 이해하면 됩니다.

 

---

일단 내가 할 수 있을 만큼 간단하게 설명은 하였는데 혹시 이해가 안되는 부분은 댓글로 남겨주기 바랍니다.

 

전체 코드

코드 보기

import 'package:flutter/material.dart';

  void main() {
    runApp(
      const MyApp(),
    );
  }

  class MyApp extends StatelessWidget {
    const MyApp({super.key});

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        theme: ThemeData(
          scaffoldBackgroundColor: Colors.white, // 기본 배경색은 하얀색으로 설정
          appBarTheme: const AppBarTheme(
            backgroundColor: Colors.white,
            elevation: 0,
          ),
        ),
        debugShowCheckedModeBanner: false,
        home: const TermsOfServiceAgreement(),
      );
    }
  }


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

    @override
    State<TermsOfServiceAgreement> createState() => _TermsOfServiceAgreementState();
  }

  class _TermsOfServiceAgreementState extends State<TermsOfServiceAgreement> {
    List<bool> _isChecked = List.generate(5, (_) => false);

    bool get _buttonActive => _isChecked[1] && _isChecked[2] && _isChecked[3];

    void _updateCheckState(int index) {
      setState(() {
        // 모두 동의 체크박스일 경우
        if (index == 0) {
          bool isAllChecked = !_isChecked.every((element) => element);
          _isChecked = List.generate(5, (index) => isAllChecked);
        } else {
          _isChecked[index] = !_isChecked[index];
          _isChecked[0] = _isChecked.getRange(1, 5).every((element) => element);
        }
      });
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            icon: const Icon(
              Icons.arrow_back_ios_new_rounded,
              color: Colors.black,
            ),
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.all(18.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text('회원가입 약관 동의', style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700)),
              const SizedBox(height: 50),
              ..._renderCheckList(),
              const Spacer(),
              Row(
                children: [
                  Expanded(
                    child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: _buttonActive ? Colors.blue : Colors.grey,
                      ),
                      onPressed: () {},
                      child: const Text('가입하기',style: TextStyle(color: Colors.white),),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      );
    }

    List<Widget> _renderCheckList() {
      List<String> labels = [
        '모두 동의',
        '만 14세 이상입니다.(필수)',
        '개인정보처리방침(필수)',
        '서비스 이용 약관(필수)',
        '이벤트 및 할인 혜택 안내 동의(선택)',
      ];

      List<Widget> list = [
        renderContainer(_isChecked[0], labels[0], () => _updateCheckState(0)),
        const Divider(thickness: 1.0),
      ];

      list.addAll(List.generate(4, (index) => renderContainer(_isChecked[index + 1], labels[index + 1], () => _updateCheckState(index + 1))));

      return list;
    }

    Widget renderContainer(bool checked, String text, VoidCallback onTap) {
      return GestureDetector(
        onTap: onTap,
        child: Container(
          padding: const EdgeInsets.only(top: 20.0, bottom: 20.0),
          color: Colors.white,
          child: Row(
            children: [
              Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(color: checked ? Colors.blue : Colors.grey, width: 2.0),
                  color: checked ? Colors.blue : Colors.white,
                ),
                child: Icon(Icons.check, color: checked ? Colors.white : Colors.grey, size: 18),
              ),
              const SizedBox(width: 15),
              Text(text, style: const TextStyle(color: Colors.grey, fontSize: 18)),
            ],
          ),
        ),
      );
    }
  }