배운것들을 정리합니다.
三昧境

Flutter/App Making Learn 9

[플러터 Flutter] 소셜로그인 카카오톡 1 social login with Kakao 1

Flutter 3.22.2Dart 3.4.3DevTools 2.34.3AndroidStudio 17.0.10 koalamac 기준으로 작성되었습니다.들어가기 앞서 카카오톡 플러터 공식문서도 있음 참고 부탁드립니다.https://developers.kakao.com/docs/latest/ko/flutter/getting-started Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com  1. Kakao Developers 설정 https://developers.kakao.com/ 로 접속합니다. Kakao Developers카카오 API를 활용하여 다양한..

[플러터 Flutter] 약관 동의 페이지 만들기2 (접히는 TextBox "ExpansionTile")

위 GIF처럼 터치했을 때 TextBox가 펼쳐지며 내부의 내용을 볼 수 있고 다시 터치하면 접히는 걸 구현해 보겠습니다.Flutter v3.22.2Dart v 3.4.3DevTools 2.34.3우선 저기 있는 이용약관 자체는 굉장히 길기 때문에 파일을 하나 따로 만들어두도록 하겠습니다.제 생각에는 지금만 이렇게 주저리주저리 글을 적어놓지 나중에 제대로 된 앱을 만들려면 서버든 DB든 JSON형태로 파싱 해서 텍스트를 쓰지 않으려나.. 하는 추측이 있습니다..왜냐하면 저는 아직 초보기 때문에 모릅니다..String agreeConditionText = '이용약관 동의 내용\n...'; String personalAgreeText = '개인정보수집이용 동의 내용\n...';String t..

[플러터 Flutter] 약관 동의 페이지 만들기1 (on/off 토글키 및 bool타입 선언)

Flutter v3.22.2Dart v3.4.3DevTools v2.34.3 우선은 동의하느냐 안 하느냐의 문제이기 때문에 bool로 접근하여 빌드해보았습니다.필수동의 2개, 선택동의 1개가 있으며필수동의 2개를 반드시 true값으로 만들어줘야 확인버튼을 활성화시켜다음 페이지로 넘어가는 기능을 구현해 보겠습니다// agreement_condition_text.dartbool isAllChecked = false;bool isRequireChecked = false;bool isConditionChecked = false;bool isInfoChecked = false;bool isThirdChecked = false;void updateAllChecked() { isAllChecked = isCondi..

플러터 당근마켓 앱 카피코딩3 (피드정리)

ListView에서 각기 다른 이미지, 글 보여주기feed.dart 파일 Feed Stete에 String을 담는 imageUrl이란 변수를 선언해 줍니다.허나 그냥 선언하면 안되고Feed class내에 imageUrl이 필수로 값을 받을수 있게끔final과 required this를 사용해서 선언해줍니다. 그리고 이미지를 담고있는 ClipRRect의 child에일반적인 String형식의 Url이 아닌 widget.imageUrl을 넣어줍니다.widget. 을 사용하는 이유는 State class내에는 존재하지 않고 더 상위 클래스인 StatefulWidget에 포함되어있고 이 둘의 class는 서로 다른 class이기 때문에 서로다른 class의 변수를 사용하기 위에서는 widget.변수이름으로 사용하..

플러터 당근마켓 앱 카피코딩2 (좋아요 기능 구현, 피드리스트)

좋아요 기능 구현 좋아요 기능을 구현하기 위해서는 현재 내가 보고 있는 페이지에 상태가 변하기 때문에(어떠한 로직으로 화면의 변화가 생기는것)그 해당 페이지의 State를 바꿔줘야한는데class Feed extends StatelessWidget { const Feed({ super.key, });현재 Feed라는 페이지는 StatelessWidget으로 되어있다. 이것을 안드로이드스튜디오 기준맥 option + Enter / 윈도우 Alt + Enter 를 눌러주면위 사진 처럼 자동으로 StatefulWidget으로 변환하여 줍니다.나도 잘 모르지만 해석해보자면@override = class Feed extends StatelessWidget 을 재정의 하겠다.State createState(..

플러터 당근마켓 앱 카피코딩1 (appBar, body, floatingActionButton, bottomNavigationBar)

스파르타코딩클럽에서 국비지원을 받아 공부하는 게시물입니다.당근마켓을 카피코딩 해보았습니다.앱을 만들때는 항상 구도(appBar, body, floatingActionButton, BottomNavigationBar)를 어떻게 사용할지 구상을 한뒤,위에서부터 차례대로 내려오는 방식으로 구성하면 좋을것 같습니다.그렇기에 appBar부터 시작. appBarappBar: AppBar( backgroundColor: Colors.white, elevation: 1, shadowColor: Colors.black, leading: Row( children: [ SizedBox(width: 16), Text( ..

플러터 ListView.builder 가로 스크롤, TextField clear

기본적으로 가로로 스크롤하기, 이미지URL 사용하기, 텍스트필드 클리어, 키보드활용시 바디가 밀려올라오지 않게하기.를 집중적으로 해보았다. 아직 배워가는 과정이라 그 외에의 추가적인 기능을 넣기에는 힘들었지만. 일단 오늘의 목표치까지 한것에 대해서 작성하겠습니다. 완성코드 import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: fals..

간단한 로그인 화면 만들기

가장 윗줄 부터 천천히 하나씩 제가 이해한대로 풀어보겠습니다.틀린게 많을 예정입니다..import 'package:flutter/material.dart';flutter/material.dart 패키지를 변환하여 현재 시트에 적용시키겠다는 뜻.void main() { runApp(MyApp());}코드의 메인바디. runApp이란 함수에 MyApp을 실행하겠다 선언합니다.class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);객체지향 사용. class란 객체에 MyApp이란 이름 부여. StatelessWidget의 주요 역할은 간단한 UI의 일부 렌더링 및 상시 표시, 내부상태 불변성 보장,(오류 줄여줌) 상태가..