TIL
20230514 TIL
김빵그
2023. 5. 14. 20:36
Today 요약
1. flutter 디자인들 보면서 코드 짜는 거 연습
2.ratingbar / slider 위젯 비교
3. theme 만든후 사용 방법
1. 잘한 점
[✅] 주말 공부
[✅] 프로그래머스 코딩테스트 (2문제)
[✅] flutter 위젯 영상 강의(2개)
[✅] flutter 강의 (52-69)
2. 개선 점

3. 배운 점
1. flutter widget
Widget catalog
A catalog of some of Flutter's rich set of widgets.
docs.flutter.dev
1-1 TextStyle
- TextStyle은 엄밀히 보면 위젯은 아니다 이름 그대로 텍스트를 꾸미는 데 사용
- Text에 style 파라미터를 추가하여 textstyle 컨스트럭터의 26개 파라미터 중 하나를 사용하면 된다 (fontsize .. height..등등)
- 매번 스타일을 주기 번거로워 거의 theme을 사용 > 약간의 스타일 변경만 원한다면 기존 비슷한 스타일 선택후 변경하면 된다
1-2 Rating_bar
RatingBar.builder(
initialRating: 3,
minRating: 1,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (rating) {
print(rating);
},
);
- 최소값, 최대값, 업데이트 콜백
- ratingWidget : RatingWidget(full:Icon(Icons.star,,,,), half:, empty) 등등 여러 모양으로 변경도 가능하다
- 수직 수평도 가능할 수 있고, 드래그로 업데이트 할 수도 있다
flutter_rating_bar | Flutter Package
A simple yet fully customizable ratingbar for flutter which also include a rating bar indicator, supporting any fraction of rating.
pub.dev
2. SnackBar
const snackBar = SnackBar(
content: Text('Yay! A SnackBar!'),
);
// Find the ScaffoldMessenger in the widget tree
// and use it to show a SnackBar.
ScaffoldMessenger.of(context).showSnackBar(snackBar);
- 특정작업이 발생할 때 사용자에게 간략하게 알리는 유용한 바 ex)삭제되었습니다
- snackbar먼저 만든 후 scaffoldMessenger를 이용하여 표시한다
Display a snackbar
How to implement a snackbar to display messages.
docs.flutter.dev
3.Wrap
Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('AH')),
label: const Text('Hamilton'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('ML')),
label: const Text('Lafayette'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('HM')),
label: const Text('Mulligan'),
),
Chip(
avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: const Text('JL')),
label: const Text('Laurens'),
),
],
)
- 여러 가로 또는 세로 실행에서 자식을 표시하는 위젯
- flex-wrap과 같은 의미로 사용되는 위젯이다