728x90
반응형
- [ 언어·프레임워크/Flutter ][Flutter] "모두가 할 수 있는 플러터 UI 입문" - 쇼핑카트 앱 만들기 | StatefulWidget, Stack, Positioned, CupertinoAlertDialog2022-02-07 00:42:08"최주호, 정호준, & 정동진. (2021). 모두가 할 수 있는 플러터 UI 입문. 앤써북"으로 플러터 공부를 하고 있다. 8장에서는 쇼핑카드 앱을 만들었다. 이번 장에서는 StatefulWidget과 SatelessWidget을 심도 깊게 다루었다. StatefulWidget은 변경 가능한 상태를 가진 위젯이다. 사용자와의 상호작용에 의해 변경되는 경우에 사용한다. 그래서 final변수가 아닌 일반적인 변수를 가진다. SatelessWidget은 앱이 최초 실행될 때 단 한번 그려진다. 반면 StatefulWidget은 build 함수가 실행되면 계속해서 다시 그려진다. setState 함수를 통해서 상태 변수를 변경하게 되면 build 함수가 다시 실행된다. 앱에는 다시 그려져야 하는 부분과 그렇지..
- [ 언어·프레임워크/Flutter ][Flutter] "모두가 할 수 있는 플러터 UI 입문" - 로그인 앱 만들기2022-02-03 18:31:48"최주호, 정호준, & 정동진. (2021). 모두가 할 수 있는 플러터 UI 입문. 앤써북"으로 플러터 공부를 하고 있다. 이번 챕터에서는 size.dart 파일에 값을 지정하여 활용, 외부 라이브러리 SvgPicture 설치 및 사용, Theme 적용한 TextButton, Navigator로 화면 이동, 그리고 ListView와 TextFormField 위젯을 중요하게 다뤘다. 책에서는 ListView 위젯을 사용해 화면 overflow 문제를 해결하였는데, 아래 코드에서는 SingleChildScrollView 위젯을 적용하였다. 그리고 배경 터치 시 키보드를 사라지게 하는 기능을 추가하였다. 기존에는 키보드 숨기기 버튼으로만 사라지게 할 수 있었다. GestureDetector 위젯을 사용하였는..
- [ 언어·프레임워크/Flutter ][Flutter] "모두가 할 수 있는 플러터 UI 입문" - 프로필 앱 만들기2022-02-02 00:57:58"최주호, 정호준, & 정동진. (2021). 모두가 할 수 있는 플러터 UI 입문. 앤써북"으로 플러터 공부를 하고 있다. 이번 챕터에서는 Scaffold의 endDrawer 속성과 CircleAvatar, GridView, InkWell, TabBar, TabBarView 위젯 등을 다뤘다. components 폴더 아래에 dart 파일을 만든 후 main.dart에서 import하여 Scaffold의 body 영역에서 사용하는 방식은 앞서 만들었던 앱들과 다른 점이다. InkWell을 이용해 버튼을 만들고, TabBar와 TabBarView를 이용해 Tab을 구현하고, GridView.builder와 Image.network를 이용하여 특정 url주소의 이미지를 동적으로 처리하는 방법을 잘 기억하자..
- [ 언어·프레임워크/Flutter ][Flutter] "모두가 할 수 있는 플러터 UI 입문" - 레시피 앱 만들기2022-02-01 18:03:57"최주호, 정호준, & 정동진. (2021). 모두가 할 수 있는 플러터 UI 입문. 앤써북"으로 플러터 공부를 하고 있다. 이번 챕터에서는 AppBar, AspectRatio, ClipRRect, Column, Container, Icon, ListView 등을 다뤘다. 특별히 [그림 1]과 같이 RecipeListItem을 출력할 때 스마트폰 화면을 넘어가는 overflow 문제 해결 방법을 잘 기억하자! overflow 문제는 recipe_page.dart의 Scaffold 위젯 내 Column 위젯을 ListView 위젯으로 변경하여 해결한다. 그러면 세로 스크롤 기능이 추가되며 overflow 문제가 해결된다. // main.dart import 'package:flutter/material.d..
- [ 언어·프레임워크/Flutter ][Flutter] "모두가 할 수 있는 플러터 UI 입문" - 스토어 앱 만들기2022-02-01 12:40:57"최주호, 정호준, & 정동진. (2021). 모두가 할 수 있는 플러터 UI 입문. 앤써북"으로 플러터 공부를 하고 있다. Dart 기초 문법을 끝내고 첫 번째로 따라 만들어 본 앱은 스토어 앱이다. 기능은 없고 최소한의 모양만 갖추었다. 이번 챕터를 통해 MaterialApp과 CupertinoApp의 용도를 알게 되었고, 위젯 Column, Expanded, Image, Padding, Row, SafeArea, Scaffold, SizedBox, Spacer, Text 등을 다뤄 볼 수 있었다. // main.dart import 'package:flutter/material.dart'; // main 함수에서 runApp 함수를 호출 void main() { runApp(MyApp()); } c..
728x90
반응형