주요기능들 설명은 다 한것 같고 개발시 자주 사용하게 될 소소한 기능정리를 하려 한다.
1. List 정렬
- sort(a,b) 함수를 사용한다.
- 정렬 형태를 바꿀때는 조건식을 바꾸거나, 1차로 정렬한 다음 List.from(원본리스트.reversed); 를 이용하면 된다.
chartItems.sort((a, b) => a.high.compareTo(b.high));
2. 소수점 자르기
소수점변수명.toStringAsFixed(자를소수점개수);
3. Listview 최하단 위치로 이동
- 가장 최근 항목을 맨 아래에 위치하기 위해서 scroll 이동도 고려하였으나, 적절한 이벤트를 찾지못해 반영하진 못하였다.
- 대신에, Listview에 표현되는 list 변수를 역순으로 만들고, Listview 의 reverse : true를 이용하였다.
ListView(
reverse: true,
controller: widget.scrollController,
children: getList(),
),* scrollController 를 통해 스크롤의 위치를 코드로 조작 할 수 있다.
//끝점으로 이동
scrollController.position.jumpTo(scrollController.position.maxScrollExtent)
4. 문자열에서 변수값 적용하기
- "문자열 내용 $변수명"; 을 통해서 사용 가능하다. ${변수명} 이 사용되기도 한다 (여러개 일때)
5. EdgeInsets
- 몇몇 위젯에선 마진값 혹은 패딩값을 설정할 수 있다. 이때 사용되는것이 EdgeInsets 이다.
- only, all 등이 있다.
EdgeInsets.only(bottom: 10.0)
6. 몇몇 위젯 내용 정리
- Container 위젯
- 마진, 혹은 border 에 선을 그리고 싶을때 사용 가능하다.
Container(
decoration: BoxDecoration(
border:
Border.all(color: Colors.black12, style: BorderStyle.solid),
),
margin: const EdgeInsets.only(bottom: 10.0),
.....- padding 위젯
- 패딩을 적용하기 위한 위젯.
Padding(
padding: const EdgeInsets.all(20.0),
child: ElevatedButton(
onPressed: () => {Navigator.pop(context)},
child: const Text("닫기")),
),- SingleChildScrollView 위젯
- 간단하게 스크롤뷰를 적용할 때 사용한다. 이외에도 다수의 스크롤뷰 위젯이 있다.
- SizedBox
- width와 height 가 지정 가능하다. 따라서 특정 크기의 위젯을 생성할때 사용하기 좋다.
- 절대값 보다는 상대값 혹은 퍼센트로 계산된 값을 선호하는 편이라 다음의 작업을 했다
//화면의 전체 너비 혹은 높이를 100으로 나누어 백분율 한다.
변수명 = MediaQuery.of(context).size.width / 100.0;
//width나 height 값 설정시 원하는 비율을 곱해준다.
SizedBox (width : 변수명 * 5, ....- fitterbox
- 여기에 속한 자식위젯의 크기를 fitterbox 크기만큼 꽉차게 보여준다.
- text 위젯을 사용할때 유용한듯 싶다.
- alignment 등 속성값으로 조정이 가능하다.
FittedBox(
child: Text("이완기(낮은값) : ${item.low}"),
), - IconButton
- 아이콘을 이용하는 버튼을 생성한다.
- ElevatedButton
- 약간 떠있는? 듯한 버튼을 만든다. 나의 경우 사각형으로 꽉 차는 버튼을 만드는 용도로 사용했다.
- child 에 Text위젯을 통해 버튼 text 설정이 가능하다.
- scaffold
- 앞에서도 설명했던것 같은데, 다시한번 정리한다. 기본UI 구성의 위젯이다.
- appBar 속성(화면 상단부), body 속성(화면 메인부), floatingActionButton(화면 우하단 원형 버튼) 속성 등 있다.
- SafeArea
- 기기별 표현되는 영역에 위젯을 배치한다. 예를들어 아이폰 노치같은 경우, 해당 부분을 제외한 영역에 위젯을 배치한다.
- GestureDetector 과 TextField
- text 입력에 사용되며 둘이 같이 사용된다 보면된다. 일전에 한번 설명했으므로 패스.
GestureDetector(onTap: () => FocusScope.of(context).unfocus(),
child:TextField(decoration: const InputDecoration(hintText: "정상 : 120 미만", labelText: "수축기(높은수치) : "),
onChanged: (text) =>
{
if(text.isEmpty)
{
widget.inputMax = 0
}
else
{
widget.inputMax = int.parse(text)
}
},
keyboardType: TextInputType.number,
controller: widget.controller1,
),
),
),
끝으로, 소감
파편적으로, 혹은 이론적으로만 플러터 공부를 하였다가, 개인적인 필요성에 의해 처음으로 구성한 첫 프로젝트 였다.
코드의 중복도 심하고, 리소스 낭비나 예외처리도 매우 부족하다. 여러 아쉬움이 남으면서도, 확실히 작더라도 프로젝트를 진행을 하니
플러터에 익숙해짐을 느낄 수 있었다. 그러나 아직도 jetpack compose 스타일의 UI를 생성하는것은 참 난해하다.
(indent 가 너무.....늘어난다. 항목 파악하기도 어렵고, 괄호를 어디서 빼먹었는지 헷갈릴때도 많다)
개발할 당시에는 많은 기능들을 넣었다고 생각했는데, 막상 내용정리를 해보니 정리할 내용이 별로 없는듯 하다..
뭔가 시원섭섭한 느낌이다. 다음번에는 RestAPI와 json 연동 그리고 파이썬으로 가벼운 백앤드 구현을 목표로 하고 있는데.... 일단 귀찮음을 이겨내야 하고, 아이디어를 짜내봐야 겠다.
'Flutter' 카테고리의 다른 글
| Protobuf (socket.io) (0) | 2023.10.18 |
|---|---|
| Flutter - kotlin 간 호출 (0) | 2023.10.18 |
| [Toy] 혈압 기록 노트(4) - 차트연동 (0) | 2023.05.18 |
| [Toy] 혈압 기록 노트(3) - 페이지 이동, 복귀 (0) | 2023.05.18 |
| [Toy] 혈압 기록 노트(2) - Firebase Cloud FireStore 소개 및 사용 (2) | 2023.05.18 |