분류 전체보기 (80) 썸네일형 리스트형 Flutter에서 Shared Preferences (캐싱) 사용법 주제 - Flutter에서 Id, Pw를 입력받아서 저장 (캐싱) 하기. - 어플을 종료해도 입력한 값을 기억하고 있는다. 필요한 패키지: shared_preferences 링크: https://pub.dev/packages/shared_preferences shared_preferences | Flutter Package Flutter plugin for reading and writing simple key-value pairs. Wraps NSUserDefaults on iOS and SharedPreferences on Android. pub.dev yami 파일에 1 2 dependencies: shared_preferences: ^0.5.3+2 cs 와 같이 의존성 추가를 해주자. -아래는 결.. Flutter 코드 리팩토링 페이스북 뉴스피드 / Lo-fi 프로토타이핑 페이스북 뉴스피드와 같은 한 화면에 여러 기능을 하는 위젯이 여러개 있는 경우, 한 위젯만으로 관리하기가 매우 힘듭니다. 위 이미지의 우측과 같이 프로토타이핑 하더라도 300여라인의 코드와 수십개의 위젯이 한 dart 파일안에 있습니다. 위젯을 리팩토링할 때는 가장 먼저 분리할 위젯의 영역을 정해야합니다. 위 이미지에서는 아래와 같이 나눌 수 있습니다. AppBar (뉴스피드 타이틀을 가진) 5개 버튼이 있는 탭바 뉴스피드 리스트 하단의 버튼 리스트 각 영역을 새로운 위젯 또는 메소드로 분리할 수 있습니다. 가장 쉬운 접근 방법은 각 영역을 메소드로 분리하는 방법입니다. 하지만 이 방식은 안티패턴입니다. 이번에는 카운터 예제로 왜 메소드로 리팩토링 하는 것이 .. 플러터 위젯 - 위치, 정렬, 크기를 위한 위젯 위치, 정렬, 크기를 위한 위젯은 함수명만 다를뿐 CSS와 매우 비슷하다. 1. Center 중앙으로 정렬시키는 위젯 •Child 프로퍼티에 중앙에 배치할 위젯을 설정함 2. Padding 안쪽 여백을 표현할 때 사용하는 위젯 •EdgeInsets 클래스를 사용하여 값을 설정함 •All()함수는 네 방향 모두 같은 값을 지정함 •fromLTRB() 함수는 네 방향의 값을 각각 지정함 3. Align 자식 위젯의 정렬 방향을 정할 수 있는 위젯 •원하는 방향으로 위젯을 정렬할 때 사용 •Alignment 프로퍼티에 정렬하고자 하는 방향을 정의해야함 4. Expanded 자식 위젯의 크기를 최대한으로 확장시켜주는 위젯 •여러 위젯에 동시에 적용하면 flex 프로퍼티에 정숫값을 지정하여 비율을 정할 수 있음... 플러터 위젯 - 화면 배치에 쓰는 위젯(2) 1. SingleChildScrollView 하나의 자식을 포함하는 스크롤 가능한 위젯 •Column은 위젯의 크기만큼 가로 길이를 가지므로 영역이 좁을 수 있음 •ListBody를 사용하면 스크롤 가능 영역이 가로로 꽉 차기때문에 스크롤하기 더 편리함 2. ListView, ListTile 리스트를 표시하는 위젯 •SingleChildScrollView와 Listbody의 조합과 동일한 효과를 냄 •좀 더 리스트 표현에 최적화된 위젯 •ListView와 ListTile 위젯을 조합하면 표준적인 리스트를 쉽게 만들 수 있음 3. GridView 열 수를 지정하여 그리드 형태로 표시하는 위젯 •GridView.count() 생성자를 사용하면 간단하게 그리드 작성 가능 예시) GridView.count() .. Flutter StatefulWiget Lifecycle(생명주기) Stateful Widget Lifecycle(생명주기) 플러터가 StatefulWidget을 만들 때, State객체를 만든다. 이 개체는 해당 위젯의 모든 가변 상태가 유지 되는 곳이다. state의 개념은 두 가지로 정의 된다: 위젯이 사용하는 데이터는 변경 될 수 있다. 위젯이 빌드 될때 데이터를 동시에(synchronously) 읽을 수 없다. (모든 state는 build 메서드가 호출 될때 까지 설정 되어야 한다.) 라이프 싸이클은 다음과 같은 간단한 단계를 포함하고 있다. createState() mounted == true initState() didChangeDependencies() build() didUpdateWidget() setState() deactivate() dispose.. Flutter 프로젝트 구조와 앱 구조 플러터 프로젝트 폴더 구조 프로젝트를 만들면 이 안에 프로젝트 파일들이 자동으로 생성됩니다. 샘플 앱이 함께 생성 되기 때문에 아무것도 하지 않아도 앱이 하나 만들어진겁니다. ios: iOS 빌드시에 필요한 파일들과 코드들이 생성됩니다. android: Android 빌드시에 필요한 파일들과 코드들이 생성됩니다. lib: 스켈레톤 앱의 코드가 들어있으며, 이후의 코드 구현은 거의 모두 이 폴더 내에서 합니다. pubspec.yaml: 플러터 프로젝트의 중심 같은 파일로, 앱 이름, 버전, 빌드, 의존성 (dependencies), 리소스 (이미지, 폰트 파일 등) 등이 모두 등록되어 있는 파일입니다. 플러터 앱 구조 다음은 플러터 프로젝트 생성시 샘플 앱 코드를 나눠봤습니다. 위 세덩어리는 사실상 거의 .. 안드로이드 Context 개념 정리 이 글의 출처: https://zxcv5500.tistory.com/258 [샤핀의 blog] 안드로이드 Context에 대해서 구글링 해보면 참 더럽게 알아듣기 힘들다. 그래서 내 방식으로 이해한 Context에 대해 정리해 봅니다. 이 글은 public 저작권으로 상업적 이용, 인용 등 아무 제한 없이 어디서든 가져다 쓰셔도 됩니다. by sharpen 안드로이드 개발을 하다보면 아래 코드 처럼 public MultiCheckBox(Context context) { 같은 소스코드를 자주 볼 수 있죠.. 그런데 기본서에는 context가 뭔지 설명 안하고 간단하게 넘어가서... 자바를 공부하고 온 사람들도 이해 안가는 상태로 쓰게 됩니다. public class MultiCheckBox extends .. 플러터 위젯 - 화면 배치에 쓰는 위젯(1) 위젯은 화면을 구성하는 컴포넌트다. UI는 위젯의 조합으로 구성되므로 위젯을 많이 알수록 더 좋은 UI를 만들 수 있다. 플러터는 머티리얼 디자인을 표준 디자인으로 사용하지만 필요에 따라 iOS 쿠퍼티노 디자인도 사용 가능하다. 오늘은 수많은 위젯 중 화면 배치에 쓰는 위젯 몇 가지를 살펴볼 예정이다. 1. Container Container는 아무것도 없는 위젯을 뜻하며 다음과 같은 특징을 가지고있다. •다양한 프로퍼티를 가지고 있음 •사용하기에 따라서 다양한 응용 가능 •가로 세로 길이, 색, 안쪽 여백(padding), 바깥쪽 여백(margin)등 설정 가능 •Child 프로퍼티로 또 다른 위젯을 자식으로 가질 수 있음 2. Column Column은 수직 방향으로 위젯들을 나란히 배치하는 위젯이다.. 이전 1 ··· 6 7 8 9 10 다음
