Flutter(114)
-
[006] 플러터 (Flutter) 배우기 - ListView (리스트 만들기)
안녕하세요~ totally 개발자입니다. ListView 오늘 다뤄볼 위젯은 ListView(리스트뷰)입니다. 이 ListView를 사용하면 가로 방향 혹은 세로 방향으로 여러 위젯들을 배치할 수 있습니다. 플러터에서 이 ListView는 GridView와 더불어서 많은 위젯들을 표시할 때 거의 필수적으로 사용되는 위젯이어서 반드시 알고 계셔야 합니다. 앞선 강의해서 보셨다시피 저희는 이미 Drawer 위젯에서 ListView 위젯으로 메뉴를 표시했습니다. 이것을 Scaffold 위젯의 child 즉 메인 부분에 배치하여 적용해보도록 하겠습니다. 보통 페이스북, 인스타그램 등 보시면 스크롤을 하여 포스트를 확인하는 것처럼 이번 시간에는 비슷하게 응용해 보겠습니다. 이제 여러 위젯이 중첩되어 살짝 복잡해지..
2022.10.09 -
[005] 플러터 (Flutter) 배우기 - GestureDetector, setState (제스쳐 인식하기)
안녕하세요~ totally 개발자입니다. GestureDetector 오늘 다뤄볼 내용은 GestureDetector 위젯입니다. 용어 그대로 제스쳐를 감지하는 기능을 가진 위젯이며 사용자의 제스쳐를 인식하기 위해 사용합니다. 이 GestureDetector를 사용할 때에는 인식하려는 범위에 따라 넣어주는 위치가 다르기 때문에 이 부분 주의하셔서 사용하시면 됩니다. 많이 사용하는 제스쳐 속성으로는 onTap이며 나머지 필요한 속성들은 여기에서 참고하시면 됩니다. 이 GestureDetector 위젯을 사용하여 버튼을 눌렀을 때, 밝은 배경을 어두운 배경으로, 어두운 배경을 밝은 배경으로 전환하는 기능을 만들어보도록 하겠습니다. 먼저 9번째 줄의 bool isLightTheme = true; 이렇게 boo..
2022.10.08 -
[004] 플러터 (Flutter) 배우기 - Stack (겹쳐 쌓기)
안녕하세요~ totally 개발자입니다. Stack Widget 오늘 배울 부분은 바로 Stack입니다. Stack Widget은 다양한 component들을 겹쳐서 쌓을 수 있게 도와주는 위젯으로 주어진 공간에 다양한 컴포넌트들을 중첩할 때 사용합니다. 먼저 기본적인 Stack의 사용법은 Stack안에는 여러가지 component들을 넣을 수 있기 때문에 배열 형태의 [] 대괄호를 넣어주시면 됩니다. 위 이미지를 보면, 34번째 줄에 height 속성을 부여하고, 36번째 줄에 alignment 속성을 이용하여 가운데 배치한 모습입니다. 이렇게 Stack은 기본적으로 정렬 속성도 제공하여 개발자가 원하는 위치로 간단히 정렬을 할 수 있습니다. Stack의 응용을 쉽게 표현하기 위해, 4개의 Contai..
2022.10.04 -
[003] 플러터 (Flutter) 배우기 - Container, Row, Column (컨테이너, 행렬)
안녕하세요~ Totally 개발자입니다. 이번 시간에는 Container, Row, Column에 관련하여 설명하고자 합니다. Container 위젯 먼저 Container widget은 HTML의 div 태그 용도처럼 광범위하게 쓰이며 margin, border, padding, child(content)의 속성을 가집니다. 아래처럼 width, height, color 등의 속성도 제공하여 스타일 및 크기 등을 지정할 수 있으며 child 속성에 Text 등의 다양한 위젯을 추가할 수 있습니다. Row 위젯 Row 위젯은 한 행에 여러가지 열의 위젯들을 배치할 때 사용하며 children속성에 배열 형태로 위젯들을 지정할 수 있습니다. Row 위젯은 여러가지 속성들을 제공하고 있는데, 그 중 많이 쓰..
2022.10.03 -
[002] 플러터 (Flutter) 배우기 - Scaffold, AppBar, Drawer, Body (기본 뼈대 구성)
안녕하세요~ Totally 개발자입니다. 제가 Flutter(플러터) 프레임워크로 어플을 제작해보면서 핵심적으로 알고 있어야 하는 부분들을 중심으로 같이 배워보는 글을 올리니 차근차근 따라해보시면 어렵지 않게 따라오실 것으로 생각합니다. 이렇게 기본 틀을 만들어줍니다. StatefulWidget, StatelessWidget 등은 추후에 더 설명을 드리겠지만 여기에서 간단히 설명을 드리면 Stateless Widget은 상태가 변하지 않는 위젯을 제작할 때 쓰이고 Stateful Widget은 몇 번이고 상태가 계속해서 변하는 경우에 쓰입니다. 여기에서는 Stateful로 진행하도록 하겠습니다. 위 스크립트를 보시면 플러터에서는 기본 Scaffold 위젯을 활용하여 기본 뼈대 구조를 구성할 수 있습니다...
2022.10.01 -
[001] 플러터 (Flutter) 개요 및 장단점
안녕하세요~ Totally 개발자입니다. 저는 처음 개발자 인턴으로 일할 때 플러터를 사용하여 앱 개발을 진행했습니다. 플러터는 2017년 5월에 구글에서 출시한 모바일, 웹, Desktop에서 작동하는 크로스 플랫폼 GUI SDK입니다. 한 번의 개발로 Android 및 ios, 웹, 데스크탑 모두에서 동작되는 Application을 생성할 수 있는 것이 최고의 장점입니다. 저도 인턴 당시 회사에서 플러터를 선택한 주요 이유도 안드로이드, iOS 두 가지 모두를 지원하는 어플을 제작하는 것이 제일 우선순위에 있어서라고 생각합니다. [장점] 1. 하나의 코드로 Android, iOS, 웹, 데스크탑 등 다양한 플랫폼 지원 2. 비교적 쉬운 UI 작업 3. Dart 언어 하나로 작업 [단점] 1. 네이티브..
2022.09.27