Search
▪️

Widgets, Styling, Adding Logic - Building a Real App

CrossAxisAlignment는 center가 default이다.
External Package 들은 Dart Project 내로 설치 가능하다.
intl
internationalisation
helps localizing the app
like different text for different locales and different langauges
DateFormat()
format
http
google maps
etc
String을 onChanged로 바뀔 때마다 저장할 수도 있지만 Controller을 통해서 관리할 수도 있다.
Flutter의 특성상 Widget과 State는 연결되어 있다. State에서는 widget.을 통해서 Widget의 요소들을 접근할 수 있다.
색상 지정에 대해서 색상 바꿔야 하면 일일이 바꿔야 한다. 이는 MaterialApp의 Theming으로 시간을 절약할 수 있다. argument로 theme을 주면 된다.
Theme 설정 후엔 다른 Widget에서 Theme 색상을 쓰기 위해선 Theme.of(context).을 쓰게 된다.
primaryColor / primarySwatch / accentColor 등이 있다. Theme에 색상 외에 Font도 묶을 수 있다.
** Widget의 Theme을 parent Widget의 Theme으로 주어도 되고 main의 Theme data 정의할 때 주어도 된다.
** ~~ThemeData는 하나부터 열까지 모두 다 Theme에 대해서 정의하는 것이다. 현재 ThemeData를 활용하고 싶다면 .of(context)를 활용한다. 이 때, 만일 현재 ThemeData를 부분 override하여 새로운 정의를 하고 싶다면 copyWith를 활용한다.
Card는 Parent Widget의 사이즈에 따라서 결정된다. 만일 Parent Widget의 사이즈가 불분명하다면 Child Widget의 사이즈에 따라 결정된다.
항목 추가에 대해서 Scroll을 적용하고 싶다면 화면 전체에 일단 SingleChildScrollView을 적용해 주어야 한다. (부분 항목에 대해서만 Scroll 가능하게 했다고 해도 필요하다. 이는 화면 rotation했을 때 overflow 때문이다.)
SingleChildScrollView 말고 ListView도 이용 가능하지만 높이 값에 대해서 명시 해야함
ListView(children: [])
그냥 다 load
메모리 효율성 x
ListView.builder()
보이는 것만 load
메모리 효율성 o
** ListView infinity로 visible하지 않으면 Expanded를 주어도 좋다.
Image 넣고 잘리면 fit 옵션을 통해 해결 가능하다. fit 옵션 넣기 위해서는 container가 있어야 fit 옵션이 제대로 작동한다.
TextField Widget에는 SingleChildScrollView를 주는 것이 입력에 많은 편함을 가져다 준다.
List.generate(int count, (index) {return;}
<List>.reversed().toList()
<List>.remove(object obj)
<List>.removeWhere((index) {return;})
<List>.where((index) {return;})
<List>.fold(int initialValue, (sum, index) {return;})
<List>.firstWhere((index) {return;})
showModalBottomSheet(context: , builder: ,)
밑에서 sheet 올라오게 하는 함수이다.
** showModalBottomSheet은 기본으로 화면의 절반 크기 만큼을 차지하는데, 기기마다 그 이상을 차지하면서 이 위젯들을 못 보는 경우도 생긴다. 따라서 isScrollControlled 속성을 부여하여 해결 가능하다. 또한 스크롤로 못 보는 경우는 사라졌지만, 키보드 바로 위에 해당 위젯을 위치하지 않는 경우가 생긴다면 SingleScrollChildView를 부여함과 동시에 bottom padding을 키보드 높이 만큼 주면 해결된다.
ShowDatePicker(context: , initialDate: , firstDate: , lastTime: ,)
DatePicker 자동 지원 함수이다.
then()함수를 이용하여 비동기 처리를 해줘야 한다.