[분류 전체보기] - 플러터 공부 Day5: Hello Flutter
플러터 공부 Day5: Hello Flutter
[분류 전체보기] - 플러터 공부 Day4: asynchronous programming 플러터 공부 Day4: asynchronous programming [분류 전체보기] - 플러터 공부 Day3: Functional Programming 플러터 공부 Day3: Functional Programming [분류 전체보기
jastory.tistory.com
Row/Column:
- Row 는 가로, Column은 세로로 쌓을 수 있는 Widget이다.
- Widget안에서 child대신 children이라는 list을 사용할 수 있다.
- MainAxis는 Row에서는 가로, Column에서는 세로
- CrossAxis는 Row에서는 세로, Columnd에서는 가로로 반대다
- SpaceBetween은 주어진 공간에서 widget들이 가장 떨어져있는 상태
SizedBox
- 이 Widget을 사용하면 아무것도 없이 자리만 차지하는 box를 만들 수 있다.
Padding
-padding Widget은 선택한 Widget 주변에 공간을 만들어 준다.
- padding: 이라는 named parameter를 필수로 넣어줘야한다
Color
- 색을 선택할때는 Colors.red 같이 Colors를 사용해서 기본 색을 사용할 수도 있고,
Color(0xFF333333)같이 Hex코드로 사용할 수도 있다. 또는 Color.fromRGBO() 같이 RBGO를 사용할 수도 있다.
Developer Tool
오른쪽 위에 파란색 돋보기 아이콘을 클릭하면 개발자 툴을 열 수 있다.
Widget의 parent들을 볼 수도 있고 Layout Explorer 에서 AxisAlignment도 볼 수 있다.
Widget Details Tree 에서는 Widget의 Properties을 볼 수 있다.
Widget Tree 위에 있는 이 아이콘을 눌러 가이드라인을 볼 수도 있다.
왼쪽 위에 있는 이 아이콘을 누르면 simulator 화면을 클릭해 widget을 확인할 수도 있다.
Container
-이 Widget은 상자를 하나 만들어 준다. 안에 Text Widget등을 넣어줄 수 있다.
-decoration parameter에서 BoxDecoration() function으로 꾸며줄 수도 있다.
ex) BoxDecoration() 에 있는 borderRadius parameter에 BorderRadius.circular(x)를 해주면 코너가 둥글어진다
- Container Widget의 alignment parameter를 사용해 child Widget의 위치를 변경해 줄 수 있다.
Removing Blue Lines
-코드 밑에 있는 파란 선은 const를 사용해 지울 수 있지만, command+shift+P 를 눌러 command palette를 켜주고 open user settings json 파일에 들어가 editor.codeActionsOnSave의 source.fixAll를 true로 해주고 파일을 재저장하면 자동으로 없어진다.
또한 같은 json 파일에서
를 true로 설정해주고 vscode를 재실행하면 부모 widget이 무엇인지 알려준다.
Code Actions
- 코드 왼쪽에 있는 전구를 클릭(또는 단축키인 command+.)하면 코드를 refactor 할 수 있다. ex) wrap with widget
Reusable Widget
- 같은 Widget의 코드를 여러번 쓰지 않으려면 lib 폴더에 새 dart파일을 만들고 StatelessWidget을 사용한 class를 만들어 반복된 Widget을 return 해주면 된다.
- 그리고 Widget마다 바꾸고 싶은 값은 변수로 빼주고 constructor를 만들어 받아주면 된다. 그러면 main 파일에서 새로만든 dart파일을 import하고 Widget이 있는 class를 불러주면 된다.
Icon
- Icon Widget의 parameter 안에는 Icons.print 같이 아이콘을 넣어줘야한다.
- 사이즈는 size: 색은 color: 라는 named parameter를 사용하면 된다.
Transform.scale
- 이 Widget안에 child로 넣은 Widget은 밖에 있는 Container의 사이즈를 벗어나 더 커질 수 있다.
- scale이라는 named parameter도 필수이다.
Transform.translate
- Transform.scale Widget과 같이 안에 child로 있는 Widget을 Container의 사이즈를 벗어나 다른 위치로 움직일 수 있다.
- 이걸 사용해서 Container들끼리 겹치게 둘 수도 있다.
- offset이라는 named parameter안에는 OffSet(dx, dy)라는 Widget을 넣어줘야한다. dx는 x축으로 움직이는 값, dy는 y축으로 움직이는 값.
clipBehavior
- Container Widget에 clipBehavior라는 named parameter를 사용해 Container밖으로 삐져나온 부분을 지울 수 있다.
ex)
If in parameter
- 예를 들어 isInverted 가 true 일때는 black, false 일때는 white를 color: parameter에 넣고 싶으면
- color: isInverted? Colors.black: Colors.white, 로 해주면 된다.
SingleChildScrollView
- 화면의 Widget들을 이 Widget으로 감싸주면 화면을 스크롤할 수 있다.
댓글