[Flutter] 로또어플 만들기 - 버튼 클릭 시 활성화/비활성화 설정하기

고정수, 제외수 선택 후 로또번호 뽑기

로또윙 어플리케이션에서 랜덤뽑기 방식으로 고정수와 제외수를 선택하려 한다.

고정수와 제외수란 로또번호 선택 시 꼭 넣고 싶은 수를 고정수라고 하고, 제외하고 싶은 수를 제외수라고 한다. 

각각 원하는 숫자의 버튼을 선택한 후 포함, 불포함을 설정해야 한다. 

로또번호 뽑는 플로우

랜덤뽑기 순서는 고정수 선택 > 제외수 선택 > 랜덤뽑기 이다. 번호가 중복 되지 않게 하기 위해 고정수 최대 5개 선택 후 제외수 선택 시 고정수가 화면에 표시되도록 했다. 고정수는 사용자가 원하는 숫자앱이기 때문에 로또윙 메인 컬러로 표현을 하여 긍정적인 느낌을 주려 하였고, 제외수는 피하고 싶은 숫자이기에 파랑과 대비되는 빨강으로 표현하여 컬러로 이미지의 구분을 두었다. 

🍎 코드로 구현해보자

0. Slive List와 Slive Grid를 사용하여 스크롤 영역 나누기

Expanded

	SliverList

		<타이틀>

	SliverGrid

		<버튼영역>

 

참고링크 : https://birdgang82.medium.com/flutter-sliverlist-widget-of-the-week-51b7b3fa62e2

[Flutter] SliverList (Widget of the Week)

https://flutter.dev/docs/cookbook/lists/grid-lists

Create a grid list

 

1. Grid List를 사용하여 1부터 45까지 번호 버튼 위젯 만들기

body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: CustomScrollView(
                slivers: [
                  SliverList(
                    delegate: SliverChildListDelegate(
                      [
                        Padding(
                          padding: const EdgeInsets.symmetric(vertical: 24),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                '고정수를 선택해주세요 (최대 5개)',
                                style: TextStyle(
                                  fontSize: 18,
                                  color: HexColor.fromHex(LTWColor().black),
                                ),
                              ),
                              SvgPicture.asset(
                                  'assets/icon/arrow-down-s-line.svg'),
                            ],
                          ),
                        ),
                      ]
                    ),
                  ),
                  SliverGrid.count(
                    crossAxisCount: 7,
                    children: List.generate(45, (index) {
                      return DrawButtonBall(drawNo: (index + 1));
                    }),
                  ),
                ],
              ),
            ),

 

 

이걸 생판 첨으로 그것도, 플러터로 구현하려니 참.. 미지의 세계이다.
코드는 외국어를 배우는 느낌이다. 영어 단어와 문법을 외워야하는 것 처럼 코드도 그냥 받아들여야 한다는 걸 느낀다. 나도 경험이 쌓이다 보면 이해하는 수준까지 올라 갈 수 있을거라는 희망을 품으며 구글링을 한다.

UI 디자인은 아래 링크에서 확인하세요^*^

https://www.figma.com/file/bYkzTfdsRS7wh9nILsJ5zs/LottoWing?node-id=101%3A7 

Figma