Study Record

🎁 SafeArea Widget 안드로이드와 아이폰에 있는 상태바나 홈버튼 부분(아이폰만 존재)을 없앨 수 있는 위젯이다. argments top: [ true / false ] : 상태바 부분을 포함하지 않는다. bottom [ true / false ] : 홈버튼 부분을 포함하지 않는다. 예시 ) void main() { runApp( MaterialApp( home: HomeScreen(); ) ); } class HomeScreen extends StatelessWidget { const HomeScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( backgroundCo..

🎁 Appbar 플러터에서 앱바 기능을 해주는 위젯은 Appbar() 위젯이다. Scaffold() 의 appbar 인자로 사용할 수 있다. flutter api 공식 문서에 나와있는 것을 참고하면 앱바의 주요 부분들을 leading, title, actions ... 으로 불린다. 😶 간단한 앱바 Scaffold( appBar: AppBar( leading: Align( alignment: Alignment.centerLeft, child: IconButton( onPressed: () { print("leading press"); }, icon: Icon(Icons.arrow_back_rounded, color: Colors.black,), ), ), leadingWidth: 80.0, titleSp..

✍ Drawer Dawer 위젯은 햄버거 아이콘을 누르면 슬라이드 메뉴가 나오는 기능을 쉽게 구현해 준다. Scaffold 인자 중 drawer 에 Drawer 위젯을 넣고 appBar 인자를 채우면 자동으로 앱바에 햄버거 아이콘이 추가되면서 Drawer 를 열고 닫기를 조절할 수 있다. 기본 모양은 다음과 같다. Drawer 의 child 로 슬라이드 메뉴의 위젯을 넣어준다. Scaffold( appBar: AppBar(title: const Text("Drawer")), drawer: Drawer( backgroundColor: Colors.deepPurple, child: ListView( children: [ const DrawerHeader( child: Text("Drawer Header", ..

✍ TextField 에서 Focus 다루기 TextField 의 autoFocus 를 true 로 하면 그 TextField 에 focus가 잡히면서 키보드가 자동으로 올라간다. TextField( autoFocus: true ) 😶 코드로 Focus 요청하기 사용자가 TextField 를 클릭하거나 액션 버튼을 눌렀을 때 다음 TextField 로 focus 가 넘어가는 등 이외에도 코드로 포커스를 잡거나 해제할 수 있다. 바로 FocusNode 를 사용한다. FocusNode = myFocusNode = FocusNode(); // TextField 에 focusNode 연결 TextField( focusNode: myFocusNode; ); // 연결된 TextField 에 포커스 주기 myFoc..

✍ showModalBottomSheet 바텀 시트를 띄울 수 있게 해주는 함수이다. Future showModalBottomSheet({ required BuildContext context, required WidgetBuilder 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, RouteSett..

✍ Wrap Widget 하위 항목을 여러 수평 또는 수직으로 표시하는 위젯입니다. Row, Column 위젯의 하위 항목들의 개수가 많아 너비를 초과하는 경우 오류가 나온다. Wrap 는 하위 항목들이 너비를 초과하면 설정한 방향(수평 또는 수직)으로 다음 줄로 위젯을 자동으로 배치해준다. Wrap({ Key? key, Axis direction = Axis.horizontal, WrapAlignment alignment = WrapAlignment.start, double spacing = 0.0, WrapAlignment runAlignment = WrapAlignment.start, double runSpacing = 0.0, WrapCrossAlignment crossAxisAlignment =..

🎁 IntrinsicHeight Widget 무제한의 높이를 사용할 수 있고 자식 위젯이 무한 확장을 시도하여 보다 합리적인 높이로 크기를 조정하려는 경우에 유용하다. 비용이 많이 드는 위젯이므로 꼭 사용해야 할 때만 사용하는 게 좋다. 예를 들어, import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(home: HomeScreen_Intrinsic())); class HomeScreen_Intrinsic extends StatelessWidget { const HomeScreen_Intrinsic({Key? key}) : super(key: key); @override Widget build(BuildContext conte..

✍ StreamBuilder Widget FutureBuilder 와 비슷하게 stream 과 상호작용하며 값을 리턴 받을 때마다 다른 위젯들을 보여줘야 할 때 유용한 위젯이다. StreamBuilder({ Key? key, T? initialData, Stream? stream, required Widget Function(BuildContext, AsyncSnapshot ) builder, }) stream 인자에 stream 을 설정하면 값(데이터 타입: T)을 리턴 받을 때마다 builder 함수가 호출되면서 AsyncSnapshot 에 리턴 받은 값, 상태를 보고 판단하여 상황에 맞게 위젯들을 보여줄 수 있다. initialData가 null 이 아니면 초기 데이터 값이 null 이 아닌 ini..