Flutter20 [Flutter] SliverList 와 ListView 의 차이점 https://stackoverflow.com/questions/50367640/differences-between-sliverlist-vs-listview-in-flutter (해당 글 2018 질문, 2020 답변) Differences between SliverList vs ListView in Flutter What are the differences between SliverList and ListView in Flutter? stackoverflow.com https://medium.com/flutter/slivers-demystified-6ff68ab0296f Slivers, Demystified Or, how to do fancy scrolling techniques in your mobi.. 2023. 6. 27. [Flutter] TabBar 및 배너 아이템 만들기 💜 KurlyPage : HomeScreen 페이지에 들어가는 탭 중 하나! → '컬리 추천' - KurlyBannerItem : 4개의 탭 하단에 있는 배너 슬라이드 - ListView.Builder() : '이 상품 어때요?' 하단에 있는 상품 슬라이드 - child : ProductItem() : 슬라이드에 들어가는 하나의 아이템 (상품사진 + 이름 + 가격...) 탭바 구현하기 (HomeScreen) class HomeScreen extends StatelessWidget { const HomeScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { List categories = ["컬리추천", "신상.. 2023. 6. 26. [Flutter] TextFormField (로그인 화면) SignInScreen - 로그인 페이지 메인 (AppBar, Body 들어가는 페이지) * automaticallyImplyLeading : 이전 화면으로 돌아가는 아이콘 자동 생성 ↕ leading : IconButton 으로 직접 생성도 가능! (onPressed: () => Navigator.pop(context)) : 이전 화면으로 되돌아간다. body : KurlySignForm() : 전체적인 SignForm 에 들어가는 컴포넌트들 💜 Form 안에 _formKey : StatefulWidget 에서 관리하는 글로벌 키 _buildIdField : 아이디 입력폼 _buildPasswordField : 패스워드 입력폼 DefaultButton(로그인 버튼) + SnackBar * SnackBa.. 2023. 6. 23. [Flutter] 당근마켓 퍼블리싱 클론 코딩 정리 (2) * 해당 코드의 모든 출처는 '모두가 할 수 있는 플러터 UI - 실전편' 입니다. 상세적인 전체 코드는 올리지 않았으며, 나중에 실무에서 코드를 작성할 때 참고하거나 기억하면 좋을 위젯, 코드들을 개인 정리 용으로 적어놓았습니다. 5. NeighborhoodLifeScreen 이 화면에서도 appBar 아래에 있는 헤더 부분(life_header), 한 게시물을 나타내는 body 부분(life_body)으로 나뉠 수 있다. 물론 life_body 내에서도 태그와 날짜를 나타내는 부분(_buildTop()), 프로필을 나타내는 부분(_buildWriter()), 본문 내용 (_buildWriting()), 이미지 (_buildImage()), 하단 공감/댓글 부분 (_buildTail())까지 아주 상세.. 2023. 6. 15. [Flutter] 당근마켓 퍼블리싱 클론 코딩 정리 (1) * 해당 코드의 모든 출처는 '모두가 할 수 있는 플러터 UI - 실전편' 입니다. 상세적인 전체 코드는 올리지 않았으며, 나중에 실무에서 코드를 작성할 때 참고하거나 기억하면 좋을 위젯, 코드들을 개인 정리 용으로 적어놓았습니다. * 디렉토리 구성 lib - models : 퍼블리싱에 쓰일 스텁 데이터들 - screens : 화면들 (탭 단위로 디렉토리 나뉨, 각각 디렉토리안 components 폴더 존재) - chatting - components : 앱바, 이미지 컨테이너 등 앱 전반적으로 쓰이는 것들 - home - my_carrot - near_me - neighborhood_life - main_screen.dart : 각각 화면을 모두 포함 (네비게이션 바) - main.dart : runA.. 2023. 6. 15. [Flutter] StatelessWidget 과 StatefulWidget * 위젯의 생명주기 ? : 위젯이 화면에 그려지는 순간부터 삭제되는 순간까지의 주기 * StatelessWidget : 상태가 없는 위젯 생명주기 : stl(StatelessWidget)이 빌드되면 생성자가 실행된다. → build() 함수 실행 → build() 함수 반환한 위젯이 화면에 렌더링됨 stl 위젯은 불변이기에 한 번 생성된 인스턴스의 build() 는 재실행되지 않는다! (단 한번만 실행됨) 위젯 속성이 변경될 경우? 인스턴스를 아예 새로 생성한 후, 기존 인스턴스를 대체해서 변경 사항을 화면에 반영한다. → 앱의 큰 레이아웃 구조같이 유저의 반응에 의하여 '변경'되는 부분이 없는 부분에 사용한다. ↕ * StatefulWidget : 상태가 있는 위젯 : 위젯 생성자의 매개변수를 변경해주.. 2023. 6. 9. [Flutter] 콜백함수와 웹뷰 위젯, 웹뷰 컨트롤러 * 콜백함수? : 일정 작업이 완료되면 실행되는 함수 (바로 실행되지 않고 특정 조건이 성립될 경우에 실행됨) ex) 웹뷰에서 페이지 로딩이 완료된 뒤에 실행되는 함수 등 * 웹뷰 위젯 : 프레임워크에 내장된 브라우저를 앱의 네이티브 컴포넌트에 임베딩 하는 것! = 앱에서 웹브라우저 기능 구현하기 네이티브 컴포넌트에 비해 속도가 느리고, 애니메이션 부자연스럽지만 기존 웹사이트 손쉽게 활용 가능하다 * WebView 위젯 속성 속성 설명 initialUrl 웹뷰에서 처음 실행할 웹사이트를 String 값으로 제공 웹뷰 포함된 위젯이 화면에 생성되면 웹뷰도 생성, initialUrl에 제공된 사이트가 처음으로 실행됨 javascriptMode 웹뷰에서 자바스크립트 실행 허용할지 여부 결정 가능 * Javas.. 2023. 6. 9. [Flutter] 위젯(Widget) 소개 [ Everything is Widget! ] 플러터에서 화면에 보여지는 UI와 관련된 모~든 요소는 위젯으로 구성되어 있다. 플러터 제공 위젯 API 상태를 기반으로, 변경 사항에 알맞게 변경된 UI를 화면에 다시 그려준다. 상태가 변경될 경우 필요한 최소한의 변경 사항을 산출해서 화면을 그려낸다. 위젯 - 자식을 하나만 갖는 위젯 : Container, GestureDetector, SizedBox - 자식을 여럿 갖는 위젯 : Column, Row, ListView MaterialApp 위젯 : 머터리얼 디자인 기반의 위젯들을 사용하게 해주는 위젯 Scaffold 위젯 : 화면 전체를 차지, 레이아웃을 도와주고 UI관련 특수 기능 제공해주는 위젯 ↓ * Flutter의 기본 설정 : import '.. 2023. 6. 8. [Dart] 다트 비동기 프로그래밍 - Future / async, await / Stream 비동기 프로그래밍? : 함수 실행시 요청한 결과를 기다리거나, 대기하지 않고 바로 다음 코드를 진행! 응답 순서 != 요청한 순서 언제든 응답이 오면 그때 응답을 처리한다~ → 컴퓨터 자원을 낭비하지 않고 더욱 효율적으로 코드를 실행할 수 있다. * Future : 미래에 받아올 값 제네릭으로 어떤 미래의 값을 받아올지 정할 수 있다! → 서버 요청과 같이 오래 걸리는 작업을 기다린 다음 값을 받아오기 때문에 필요 Future name; Future number; ... * Future.delayed() : 특정 기간 동안 아무것도 하지 않고 기다림 ...(생략) Future delayed(Duration(seconds: 3), (){ print('$number1 + $number2 = ${number1.. 2023. 6. 8. [Flutter] 플러터 객체지향 프로그래밍 - (4) 제네릭과 static, 캐스케이드 연산자 * 제네릭 : 클래스, 함수의 정의를 선언할 때가 아니라 '인스턴스화' 하거나 '실행'할 때로 미룬다. 특정 변수의 타입을 하나의 타입으로 제한하고 싶지 않을 때 자주 사용! ex) List → String 값으로 구성된 리스트를 생성하겠다! // 인스턴스화 할 때 입력받을 타입 : class Cache { // data 타입 : 추후에 입력될 T 타입으로 지정 final T data; Cache({ required this.data, }); } void main(){ // T의 타입 → List 로 지정!!! ⭐⭐⭐ final cache = Cache( data: [1,2,3], ); print(cache.data.reduce((value, element) => value + element)); } *.. 2023. 6. 8. 이전 1 2 다음
