Flutter

작년부터 진행하던 모임에서 매주마다 새로운 패키지에 대해서 각자 공부해서 배운점을 공유하는 시간을 가져보기로 했다. 이번에는 flutter_hooks에 대해 알아보자고 진행이 되었고 내가 공부한 내용을 정리해보자고 한다. hooks에 대한 내용에 대한 참고는 아래와 같다. pub.dev 공식 https://pub.dev/packages/flutter_hooks flutter_hooks | Flutter package A flutter implementation of React hooks. It adds a new kind of widget with enhanced code reuse. pub.dev 개발하는남자님 유튜브 https://www.youtube.com/watch?v=GBVBLKESogU&lis..

1. 문제의 발단 개발을 하던 중에 위 사진에 빨간색 박스 부분, 즉 제품 검색 가로 부분 중 어디를 클릭해도 GestureDetector를 통해 인식을 하게 만들고 싶었습니다. Row( children: [ Expanded( child: GestureDetector( onTap: () { print('Clicked'); }, // 한 영역 부분 어디를 클릭해도 인식되도록 컨테이너로 감싸기 child: Container( child: const Row( children: [ Icon(Icons.search, color: Colors.grey), SizedBox(width: 10), Text('제품 검색', style: TextStyle(color: Colors.grey)), ], ), ), ), ), ...

PlayStore나 AppStore 어느 애플리케이션을 다운을 받아도 회원가입 약관 동의 페이지는 많이 봤을 것입니다. 스토어에 앱을 올릴때 회원가입/로그인/개인정보 등 사용자의 정보를 받아야 하게 된다면 필수적으로 개인정보처리방침을 넣어야만 승인을 해주기 때문이다. 그래서 이 페이지를 제작해 보려고 합니다. 평균적으로 체크박스는 3가지 타입의 유형을 따로 만들어 주어야 합니다. 1. 모두 동의 ( 모든 동의를 하는 체크박스 ) 2. 필수 동의 ( 반드시 해야만 다음페이지 넘어갈 수 있다. ) 3. 선택적 동의 ( 안해도 다음 페이지로 넘어 갈 수 있다. ) 그리고 만약 필수 동의가 전부 체크가 되었다면 가입하기 버튼이 활성화 되어야 합니다. 자 그럼 이제 구현해야하는 원리는 대강 알았으니 하나씩 뜯고 ..

플러터에서는 앱을 처음 실행할때 간단하게 자신이 원하는 이미지를 보여줄 수 있는 스플래시 패키지를 지원한다. https://pub.dev/packages/flutter_native_splash flutter_native_splash | Flutter Package Customize Flutter's default white native splash screen with background color and splash image. Supports dark mode, full screen, and more. pub.dev 사용법은 매우 간단하다 pubspec.yaml 에 패키지 추가 dependencies: flutter: sdk: flutter flutter_native_splash: ^최신버전 # 스플..

위와 같은 텍스트필드에서 입력을 숫자로만 제한을 하고자 할때 TextField( keyboardType: TextInputType.number, // 숫자만 입력가능 inputFormatters: [ FilteringTextInputFormatter.digitsOnly, ], cursorColor: Colors.grey, decoration: InputDecoration( border: InputBorder.none, filled: true, fillColor: Colors.grey[300], ), ), KeyboardType을 통해 원하는 값을 지정 할 수 있다. keyboardType: TextInputType.number 하지만 발생되는 문제점으로는 만약 사용자가 핸드폰을 블루투스 키보드로 연결을 ..

final List numbers = List.generate( 100, // 총 길이 (index) => index, // 숫자의 순서 ); 2개의 인자값을 받는데 1. length 2. (index) 1번에는 총 길이의 int의 값을 넣어주면 되고 2번에는 숫자가 어떻게 증가될지의 값을 적어주면 된다. 만약 위 코드를 그대로 실행할시 1,2,3 .. 99 까지 실행이 될 것이고 (index) => index * 2 를 할경우 2의 배수로 실행이 된다.