20230703 TIL

Today 요약

[✅] js 코딩테스트 3문제

[✅] flutter 강의 (3개)

---

배운 점 

1) flutter showModalBottomSheet()

Future<T?> showModalBottomSheet<T>({
  required BuildContext context,
  required Widget Function(BuildContext) builder,
  Color? backgroundColor,
  double? elevation,
  ShapeBorder? shape,
  Clip? clipBehavior,
  BoxConstraints? constraints,
  Color? barrierColor,
  bool isScrollControlled = false,
  bool useRootNavigator = false,
  bool isDismissible = true,
  bool enableDrag = true,
  bool useSafeArea = false,
  RouteSettings? routeSettings,
  AnimationController? transitionAnimationController,
  Offset? anchorPoint,
})

• showModal은 future를 반환하여 async - await 를 사용하여 아래와 같이 사용한다
• isScrollControlled  : bottom sheet 안에서 listview를 사용할 것이라면 true

void _onBottomSheet(BuildContext context) async  {
	await showModalBottomSheet(
    	context:context,
        isScrollControlled:true // 바텀시트 크기 변경가능하게
        builder:(context)=>const Container(),
    );
}

2) AppBar에서 뒤로가기 버튼 없애기

Scaffold(
	appBar : AppBar (
    	title:Text("title"), 
        automaticallyImplyLeading : false, //back button 없애기
    )
)

3)AppBar title 중앙정렬 centerTitle

 return Scaffold(
  appBar: AppBar(
    centerTitle: true,
    automaticallyImplyLeading: false,
    title: const Text(
      "22796 comments",
      style: TextStyle(),
    ),
    actions: [
      IconButton(
        onPressed: (){},
        icon: const FaIcon(FontAwesomeIcons.xmark),
      ),
    ],
  ),
);

• back 버튼을없앤후 xmark로 close 버튼을 만들시 안드로이드 버전에서는 title텍스트가 왼쪽으로 치우쳐지게 되는데 이때center Title:true 를  적어주면 중앙정렬이 된다!

4) Container()

Container(
	width:100, 
    height:100,
	clipBehavior:Clip.hardEdge,
    decoration:BoxDecoration(
    	shape:BoxShape.circle
    ), 
    child:Image....

)

• container모양에 맞추어 범위가 벗어날 경우 자동으로 잘라주는 clipBehavior

5) TextField()

• flutter의 TextField는 너비값이 정해져 있지 않아 sizedBox나 Expanded안에 넣어줘야 한다

6) flutter에서 키보드가 올라오는 순간 화면 짜부되는 거 막기

• 짜부되는 특정 화면에서 아래의 코드만 써주면 된다

Scaffold(
	resizeToAvoidBottomInset:false,
)

7) Positioned 에서 width:100% 주는 방법

Positionded(
	bottom:0,
    width:MediaQuery.of(context).size.width, // 100%

)

• Container height에서 응용하자면 MediaQuery.of(context).size.height * 0.8 할 시 80%

---

오늘도 해냈다 .. !