202307010 TIL

Today 요약

[✅]프로그래머스 코딩테스트 1문제

[✅] flutter 강의 5개

[✅] flutter 위젯 영상 1개

[✅] 깃허브 업로드

 

---

 

 

배운 점

 

1) flutter AppBar bottom 

AppBar with a custom bottom widget

• AppBar가 가진 bottom 프로퍼티를 사용할 수 있는데,  bottom 에 위젯을 가질수 있다
• PreferredSizeWidget type : 특정한 크기를 가지려고 하지만 자식 요소의 크기를 제한하지 않는 위젯 

2) TabBar()

DefaultTabController(
	length : 3, //탭 수
    child : Scaffold(
    	appBar:AppBar(
        	bottom:TabBar(
            	tabs : [
                	Tab(text:"1"), 
                    Tab(text:"2"), 
                    Tab(text:"3"),
                ]
            )
        )
        body :TabBarView()...
    )
)

• splashFactory :NoSplash.splashFactory:클릭 애니메이션 없애기
• inScrollable : true : 좌우 스크롤 
• labelStyle : fontWeight, fontSize
• indicatorColor : 언더바 컬러
• unselectedBalelColor : none active 컬러...
• DefaultTabController - TabBar - TabBarView

3) GridView

 GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: Sizes.size10,
    mainAxisSpacing: Sizes.size10,
  ),
  itemBuilder: ,
),

• gridDelegate : gridview를 구성하는 것을 도와줌
• childAspectRatio : grid 비율 

4) 이미지 로딩  FadeInImage

FadeInImage.assetNetwork(
	placeholder :  //  로딩시 나올 이미지
    image  ://최종이미지
)

• image 파일이 로딩되는 동안 placeholder 이미지를 보여준다

5) flutter text overfloww ellipsis 

Text(
	"어쩌고 저쩌고 아주 긴 텍스트..."
    maxLines :2, //  나오게 할 줄수
    overflow: TextOverflow.ellipsis,
)

6) DefaultTextStyle

DefaultTextStyle(
	style: TextStyle (".,....") // 스타일
    child  :....

)

• defaultTextstyle로 감싸게 되면 안에 있는 텍스트 스타일이 다 동일시하게 적용이 된다

7) CupertinoSearchTextField

• 기본.. 텍스트 필드
• 커스텀도 다 가능! 

CupertinoSearchTextField CupertinoSearchTextField({
  Key? key,
  TextEditingController? controller,
  void Function(String)? onChanged,
  void Function(String)? onSubmitted,
  TextStyle? style,
  String? placeholder,
  TextStyle? placeholderStyle,
  BoxDecoration? decoration,
  Color? backgroundColor,
  BorderRadius? borderRadius,
  TextInputType? keyboardType = TextInputType.text,
  EdgeInsetsGeometry padding = const EdgeInsetsDirectional.fromSTEB(5.5, 8, 5.5, 8),
  Color itemColor = CupertinoColors.secondaryLabel,
  double itemSize = 20.0,
  EdgeInsetsGeometry prefixInsets = const EdgeInsetsDirectional.fromSTEB(6, 0, 0, 3),
  Widget prefixIcon = const Icon(CupertinoIcons.search),
  EdgeInsetsGeometry suffixInsets = const EdgeInsetsDirectional.fromSTEB(0, 0, 5, 2),
  Icon suffixIcon = const Icon(CupertinoIcons.xmark_circle_fill),
  OverlayVisibilityMode suffixMode = OverlayVisibilityMode.editing,
  void Function()? onSuffixTap,
  String? restorationId,
  FocusNode? focusNode,
  SmartQuotesType? smartQuotesType,
  SmartDashesType? smartDashesType,
  bool enableIMEPersonalizedLearning = true,
  bool autofocus = false,
  void Function()? onTap,
  bool autocorrect = true,
  bool? enabled,
})

8) 텍스트필드 커서 색상 변경

ThemeData(
	textSelectionTheme : TextSelectionThemeData(
    	cursorColor:Colors.blue, 
        selectionColor:Color.blue,
    )
)

• main.dart 테마에서 한번에 변경 가능하다

9) Scaffold resizeToAvoidBottomInset : false

• 키보드 올라왔을때 scaffold 화면 짜부되는 거 막게 하는 법

---

내일 할 일 

코드 챌린지 : search input 만들기 / 탭 클릭시 키보드 사라지게 만들기