오늘 하루엔 뭐했니?
그냥 적어봐! LEE렇게!
2020.03.20 LEE'Today_회고록
목차
1. 복잡한 UI 개발 - 쓸모있는 명령어
1. 복잡한 UI 개발
오늘은 복잡한 UI를 만들어 보았습니다!
19일의 LEE'Today에선 직접 코드를 분석하고 뜯어(?)도 봤는데!
한번 뜯어 본 것으로 해당 UI를 구성하였습니다!
꽤나 공들이면 쓸모있는 APP들이 만들어 질 것 같은 실습이었습니다!
자! 그럼 이 App을 만들기까지는 수많은 Tip!들과 기술이 들어갔는지 알려드리겠습니다!
1. Alt + Enter : 하위 함수들을 덮고 싶을때?
해당 명령어는 Column이나 Row... 혹은 Widget이든!
앱을 개발하려면 하위 함수에 또 덮어 씌우고 싶을 경우가 다반사입니다!
그럴때마다 괄호를 끝에 닫아주고.. 너무 복잡해지면 시간 낭비가 심하죠 ㅠㅠ...
그래서 Flutter에서는 이러한 기능을 지원합니다.
하위 함수들을 전체를 덮어주는 친절한 기능입니다.
앱을 개발하실 때 개발자분들이 자주 사용하는 기술입니다!
2. Ctrl+Alt+L : 정렬!
해당 명령어는 우클릭하시면 'Reformat Code with dartfmt'의 기능입니다.
개발을 하시다보면 흐트러지는 코드들을 보고 맘 아프지말고, 정렬을 시키세요!
매번 우클릭을 하셔서 누르는 것보단 빠르게! 커맨드로 하시는게 편하겠죠?
3. 7개의 목록만 만들고 싶으면?
MainAxisAligment() 라는 프로퍼티를 사용하게 되면 위젯 사이에 동일한 공간을 주어 자연스럽게 정렬시켜준다.
하지만 우리가 7개의 Icon만 필요할 경우는 이쁘게 정렬시킬 수가 없게된다.
그렇다면?
8개를 만들고 한 개를 투명하게 만들면 정렬도 되고 7개의 Icon도 만들 수 있다!
투명도 조절 프로퍼티 : Opacity( opacity: 0.0 ~ 1.0 ),
Opacity( // 투명도 조절 Alt + Enter 로 아무거나 생성 후 Opacity 재구성
opacity: 0.0, // 투명도 max 0 ~ 1, 0.5 : 반투명
child: Column(
children: <Widget>[
Icon(
Icons.local_taxi,
size: 40,
),
Text('대리'),
], // Widget
), // Column
), // Opadcity개발에 대해 더 많은 Tip들이 생기면 계속해서 올려봐야겠다!
복잡한 UI의 소스코드가 궁금하다면??
Github를 방문해보자! 링크를 걸어두었다!
기억보단 기록하자! LEE'Today로!
