본문 바로가기

Flutter4

[Flutter] 코딩셰프 조금 매운 맛 - 채팅앱 유용하게 쓰일 것 같은 코드 모음  [ Firebase Firestore 데이터베이스와 실시간 데이터 스트림 연결 ]stream: FirebaseFirestore.instance .collection('chat') .orderBy('time', descending: true) .snapshots(),Firestore의 chat 컬렉션에 실시간으로 접근해 메시지를 가져오는 기능!이를 통해 사용자가 메시지를 보낼 때마다 자동으로 화면에 업데이트되는 실시간 채팅 기능을 구현할 수 있음!   [ ChatBubble 위젯을 통한 사용자와 타인 메시지 구분 ]ChatBubble( clipper: ChatBubbleClipper8(type: isMe ? BubbleType.sendBubble :.. 2024. 11. 2.
[Flutter] 코딩셰프 조금 매운 맛 - 로그인과 주사위 게임 플러터 앱 만들기 유용하게 쓰일 것 같은 코드 모음   [ TextField 입력과 유효성 검사 ]if (controller.text == 'dice' && controller2.text == '1234') { Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => dice()));}이 부분은 사용자 입력(아이디와 비밀번호)을 받아 유효성 검사를 수행하고 입력값이 일치하는 경우 새로운 화면으로 이동하게 함.유효성 검사는 로그인 기능의 중요한 로직으로, 올바른 인증 절차 없이 다음 화면으로 이동하지 않도록 방지하는 역할을 함!   [ SnackBar를 이용한 오류 메시지 출력 ]ScaffoldMessenger.of(context).sho.. 2024. 11. 2.
[Flutter] Stateful widget 볼드체만 읽으면 됩니당 (4,5 주차) StateUI가 변경되도록 영향을 미치는 데이터로, StatefulWidget과 StatelessWidget이 있다즉, State란 App의 상태를 바꾸는 모든 행위이다  플러터는 모두 위젯으로 이뤄져 있다.화면에 보여지는 요소를 클래스로 표현하며, 이를 '위젯'이라 부른다  *Stateless Widget : State가 변하지 않는 위젯*Hot Reload : 저장하면 바로 반영되는 것  Widget tree는 하나의 구성일 뿐, 직접적으로 스크린에 그려지는 건 아니다(설계도 역할 : UI에 그려줘~ 하는 느낌)Element tree는 개발자가 만든 Widget tree에 근거해서 생성을 해주는 요소이다 Widget tree에 있는 모든 위젯 하나하나가 일대일 .. 2024. 9. 30.
[Flutter] Flutter 동작 방식 이해하기! 0. 타 크로스플랫폼은 어떻게 작동하는가?swift로 iOS를, java로 andriod를 만드는 native 앱 개발을 할 때 개발자는 운영체제와 직접 대화한다.(e.g. 'button, text iput 등의 코드를 쓰는 것은 같은 요소들을 만들어줘!' 라고 운영체제에 말하는 것) 1. Flutter architectural overview Framework : Dart로 짜여진 코드가 Flutter 프레임워크 상에서 이용됨Engine : 앱의 실제 UI를 렌더링, 프레임워크를 동작시키고 UI를 그려주는 역할(-> Flutter 프레임워크가 개발자가 작성한 코드를 사용하면서 운영체제와 직접 대화x, 엔진이 화면 상에 우리가 말한 것들을 그려줌)(엔진을 하나의 가상머신이라고 생각하면 됨!) 3. 그렇다.. 2024. 8. 23.