본문으로 바로가기
Flutter/Widget
해당되는 글 11건
Flutter/Widget
Flutter LayoutBuilder 문서
Web App을 개발하면서 LayoutBuilder를 사용해 화면 크기에 따라 Mobile, Tablet, Desktop 용으로 화면을 보여줄 수 있도록 개발을 진행하였다. 이 글에서 LayoutBuilder에 기본적인 코드와 다양하게 활용해볼 예정이다. 코드 LayoutBuilder 필수 프로퍼티는 builder 하나뿐이다. builder 파라미터에 context와 사이즈를 나타내는 constraints 가 사용된다. constraints 멤버 변수에는 maxWidth, maxHeight, minWidth, minHeight 가 있다. 4가지의 변수를 활용해서 자신의 프로젝트에 맞게 개발하면 된다. Web으로 빌드해서 테스트해보는 것이 가장 편하다. Widget build(BuildContext con..
Flutter/Widget
Flutter Drawer Widget 문서(DrawerHeader, width 조절, SafeArea)
Drawer 흔히 앱 왼쪽 상단의 메뉴 아이콘을 터치하면 오른쪽 사진과 같이 나온다. 이것이 Drawer 위젯이다. overflow를 생각해서 ListView, SingleChildScrollView를 사용한다. physics: const NeverScrollableScrollPhysics() 을 추가해서 over scroll glow effect를 제거할 수 있다. SafeArea를 사용해 Drawer 위젯이 스마트폰 상단바랑 겹치는 것을 방지할 수 있다. Drawer 위젯을 Container로 Wrap한 후 width 속성을 추가하여 크기 조절이 가능하다. + 배달의 민족 앱 같은 경우 화면을 온전히 덮었다. Drawer package 이 밖에도 pub.dev에 검색하면 여러 스타일의 drawer p..
Flutter/Widget
Flutter ListTileTheme 문서
ListTileTheme 하위 위젯에 tile의 theme 값을 변경시킬 수 있다. ExpansionTile의 경우 leading 속성이 있으나 leading과 title의 gap을 줄여주는 속성이 없다. 하지만 ListTileTheme과 같이 사용하면 이를 해결할 수 있다. Tile의 종류 GridTile을 제외한 아래의 Tile에서는 ListTileTheme이 적용이 되는 것을 확인하였다. ListTile CheckBoxTile ExpansionTile AboutListTile RadioListTile SwitchListTile
Flutter/Widget
Flutter TextFormField 문서
TextFormField 텍스트를 입력하고 입력한 텍스트를 저장 및 유효성 검사를 하기 위한 위젯이다. 올바른 이메일, 아이디 중복 확인, 기타 등등... TextFormField + Form 세트로 사용한다. 1. GlobalKey, TextEditingController 선언 GlobalKey _key = GlobalKey(); TextEditingController _textEditingController = TextEditingController(); 2. Form - TextFormField로 구성한다. Form( key: _key, child: TextFormField(...), ), 3. TextFormField Property 정리 initialValue - 초깃값 controller가 n..
Flutter/Widget
Flutter DateTime Method 문서 [7/13 보완 작성하기]
DateTime Method List compareTo // now 기준 과거일때 1, 같을때 0, 미래일때 -1 now.compareTo(past!); // 1 now.compareTo(now); // 0 now.compareTo(future!); // -1 isAfter // 기준값 보다 비교값이 과거이면 true now > past => true now.isAfter(past!); // true now.isAfter(now); // false now.isAfter(future!); // false isBefore // 기준값 보다 비교값이 과거이면 false now false now.isBefore(past!); // false now.isBefore(now); // false n..
Flutter/Widget
Flutter bottomNavigationBar (상태유지) 문서
사용되는 위젯목록 TabController DefaultTabController TabBarView TabBar Tab TickerProviderStateMixin AutomaticKeepAliveClientMixin bool get wantKeepAlive => true; super.build(context); 1. with TickerProviderStateMixin 추가 class _BottomNavigationBarScreenState extends State with TickerProviderStateMixin 2. TabController 추가 animationDuration 프로퍼티 존재 _tabController = TabController(length: 3, vsync: this, ini..
