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과 같은 의미로 사용되는 위젯이다