코딩전사의 기록

[Flutter] CustomScrollView CustomScrollView 헤더의 확장, 축소 그리고 여러 개의 리스트뷰를 하나의 화면에 표현할 때 주로 사용합니다. 특징 CustomScrollView 은 다른 위젯처럼 child 나 children 이 아닌 slivers 를 받습니다. class S.. dalgoodori.tistory.com 이전 포스팅에서는 CustomScrollView 와 SliverAppBar 를 제외한 sliver 에 대해서 포스팅 했습니다. 이번 포스팅에서는 헤더를 확장, 축소하여 다양하게 UI 를 구현하는 SliverAppBar 에 대해서 포스팅 합니다. AppBar 와 겹치는 부분은 제외하고 자주 쓰는 것으로 해서 기록용으로 포스팅하겠습니다. 구현 CustomScrol..

CustomScrollView 헤더의 확장, 축소 그리고 여러 개의 리스트뷰를 하나의 화면에 표현할 때 주로 사용합니다. 특징 CustomScrollView 은 다른 위젯처럼 child 나 children 이 아닌 slivers 를 받습니다. class SampleScreen extends StatelessWidget { const SampleScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: [ ], ), ); } } slivers 는 List 받는다고 되어있지만 그냥 위젯을 넣으면 아래와 같은 에러가 발생합니다. ..

Form 과 함께 많이 쓰이는 TextFormField 를 포스팅합니다. TextFormField 의 기능은 너무 많으니 자주 쓰는 것들로 해서 기록용으로 포스팅하려고 합니다. TextFormField() 글자 수 제한 maxLength 로 글자 수를 제한할 수 있습니다. maxLength 를 적용하면 우측 하단에 counterText 가 나타납니다. TextFormField( maxLength: 6, ) counterText 는 decoration 의 InputDecoration 을 이용하여 바꿔줄 수 있습니다. counterStyle 로 꾸밀 수 있지만 counter 를 이용하여 임의로 만들 수 있습니다. counter 가 적용되어 있다면 counterText 와 counterStyle 은 무시합니다..

여러 항목 중 하나를 선택하는 것을 구현할 때 쓰이는 DropDownButton 입니다. 간단 구현 방법 DropDown 으로 선택된 값의 상태를 변경해주어야 하니 StatefulWidget 으로 만듭니다. DropDown 에 넣을 목록과 현재 선택값을 선언해주세요. initState 에서 현재 선택값을 목록의 첫번째 값으로 넣어줍니다. final _cities = ['서울', '대전', '대구', '부산', '인천', '울산', '광주']; String _selectedCity = ''; @override void initState() { super.initState(); setState(() { _selectedCity = _cities[0]; }); } DropdownButton 을 구현합니다. v..

TabBar TabBar 는 TabController 와 List 인 tabs 를 필수로 받습니다. TabBar( controller: _tabController, tabs: [ Tab(text: 'First'), Tab(text: 'Second'), Tab(text: 'Third'), ], ) 속성 1. Indicator 현재 선택된 탭의 위치를 나타내는 indicator 를 꾸미는 인자는 다음과 같습니다. // indicator 의 색상 설정 indicatorColor: Colors.black, // indicator 색상 자동 설정 여부 automaticIndicatorColorAdjustment: true, // indicator 의 굵기 설정 indicatorWeight: 2.0, // indi..

웬만한 앱에는 다 있는 BottomNavigationBar 에 대해서 포스팅 합니다. BottomNavigationBar Scaffold 내부에 bottomNavigationBar 를 통해 구현합니다. BottomNavigationBar 위젯에 List items 속성을 필수로 받습니다. import 'package:flutter/material.dart'; class SampleScreen extends StatefulWidget { const SampleScreen({Key? key}) : super(key: key); @override State createState() => _SampleScreenState(); } class _SampleScreenState extends State { @ove..

간단한 날짜, 시간 선택할 때 사용되는 피커 입니다. 역시 구현하기 아주아주아주 쉽습니다. 1. DatePicker showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(2022, 6, 22), lastDate: DateTime(2022, 8, 22), ).then((DateTime? value) => print('value = $value')); 2. TimePicker showTimePicker( context: context, initialTime: TimeOfDay(hour: 22, minute: 10), ); 3. CupertinoDatePicker showModalBottomSheet( context..

경고문구나 안내문구를 띄울 때 자주 쓰이는 AlertDialog 입니다. 아주아주아주 쉽게 구현할 수 있습니다. 창을 띄우는 것은 showDialog 로 시작합니다. showDialog BuildContext 를 받고 WidgetBuilder 로 임의의 위젯을 구현하면 됩니다. AlertDialog 를 구현하기 위해서 WidgetBuilder 에 Dialog 코드를 넣어줍니다. showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: const Text('AlertDialog Title'), content: const Text('Sample AlertDialog'), actions: [ TextBut..