슬기로운 IT생활

VScode에서 기준으로 플러터 앱 개발 환경을 세팅하겠다 우선 아래 URL에서 VSCode를 다운로드한다 ​ https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com ​ 아래와 같은 설치 화면에서 동의합..

안드로이드 스튜디오로 플러터 앱 개발이 가능한 환경을 다시 세팅하게 되어 포스팅한다. ​ 플러터 SDK 설치 ​ 아래 플러터 공식 사이트에서 다운로드한다. ​ https://flutter-ko.dev/docs/get-started/install/windows 윈도우에서 설치 flutter-ko.dev ​ 아래 flutter_windows_2.0.1-stable.zip을 다운로드했다. ​ 압축을 풀면 flutter 폴더가 보이는데 나는 그냥 C 드라이브에다가 설치했다 ​ flutter 폴더 내 파일 중에 flutter_console을 실행한다. ​ ​ ​ 그러면 정상 여부를 체크해 주는데 나는 플러터만 설치했으니 V 체크가 나온다. 이렇게 플러터가 정상임을 확인했으며 이번에는 볼 수 없었던 Chrome -..

한창 앱 개발이 진행 중이지만 개인적으로 플러터 공부에 대해 정리도 하고 쉬어가는 의미로 Stateless와 Stateful 차이점에 대해 포스팅한다. ​ Stateless Widget 화면이 로드될 때 한 번만 그려지는 State가 없는 위젯으로 변경이 필요한 Data가 없는 것을 의미하며 이벤트 또는 사용자 상호 작용에 의해 동작하지 않는다. ​ 예를 들어 지금 제작 중인 미소닭갈비 앱의 가게 안내, 메뉴 안내 화면처럼 사용자와 상호작용이 필요 없는 위젯은 Stateless Widget으로 구성하면 된다. ​ ​ Stateful Widget ​ 위젯이 동작하는 동안 Data 변경이 필요한 경우 화면을 다시 그려서 변경된 부분을 위젯에 반영하는 동적인 위젯으로 이벤트 또는 사용자 상호 작용에 의해 동작..

이제는 두 번째 화면인 메뉴 화면을 만들어보겠다. ​ 사실 메뉴판은 대표 메뉴로 어떤 음식이 있고 금액은 얼마인지 그리고 원산지가 어디인지만 잘 표현되면 된다. 그래서 홈페이지에 있는 메뉴판 내용을 그대로 가져왔다 ​ ​ 가게 안내 페이지와 동일하게 이름만 MenuGuide인 클래스에 NestedScrollView에 SliverAppBar와 ListView로 구성하였다. ​ 메뉴판 이미지는 SliverAppBar에 FlexibleSpaceBar에 넣었고 ListView 쪽에는 각 메뉴별 대표 이미지를 리스트로 줄줄이 넣었다. ​ ​ 소스 코드는 다음과 같다. import 'package:flutter/material.dart'; class MenuGuide extends StatelessWidget { ..

매장 안내를 의미하는 화면을 만들 예정이다. ​ 페이지 특성상 특별한 기술도 필요 없을 것 같고 가게를 소개하는 내용만 잘 구성해서 보이면 될 것 같다. ​ 우선 이전 포스팅에서 만든 NestedScrollView 하단에 ListView 추가 후 내용을 때려 넣으려고 한다. ​ 우선 ShopGuide 클래스에서 아래와 같이 ListView와 그 자식으로 Text를 추가해봤다. ​ 디버깅하여 에뮬레이터 화면을 보면 아래와 같이 추가한 텍스트가 잘 표현되는 것을 볼 수 있다. ​ 이제 그 아래에 공백과 사진을 넣어보겠다. 아래와 같이 Container로 공백을 넣었고 그 아래에 이미지도 추가했다. ​ 이전 포스팅에서 MediaQuery 클래스로 size.height를 이용해 핸드폰 화면 높이를 얻었는데 Co..

VS Code에서 플러터로 소스를 수정 후 디버깅할 때 에뮬레이터 우측 상단에 디버그 배너가 항상 보이는데 이 배너가 거슬리는 사람을 위해서 포스팅한다. ​ 아래 이미지 우측 상단을 보면 DEBUG라는 표시가 보임 ​ 소스 코드에서 다음을 추가한다. ​ debugShowCheckedModeBanner: false, 이후 디버깅을 수행해보면 우측 상단에 보이던 DEBUG 배너가 사라진 것을 볼 수 있다. 별거 아니지만 디버깅할 때마다 DEBUG 띠가 보이는 게 거슬리는 사람을 위해서 포스팅한다. ​ 아 그리고 이전 포스팅에서 앱 이름을 5글자로 정했더니 잘려서 고민이었는데 앱 이름은 그냥 '닭갈비'로 심플하게 정리했다. ​ 좌측 상단 앱을 보면 '닭갈비'라고 아주 심플한 앱이 보인다.

플러터란? (Flutter) 플러터(Flutter)란 구글에서 개발한 크로스플랫폼 프레임워크로 안드로이드, iOS를 한번에 개발할 수 있는 매우 효율적인 개발 프레임워크다. 유사한 기술로 페이스북의 리액트 네이티브(React Native)와 MS의 자마린(Xamarin)이 존재하며 모두 개발하는 언어도 다르고, 각각의 장단점이 존재한다. 플러터는 성능도 좋고, 쉽고 빠르게 앱 개발이 가능한 반면 다트 언어가 생소하고 출시된 지 오래되지 않아서 성숙하지 못한 단점이 존재한다. 플러터 VS 리액트 네이티브 VS 자마린 구분 플러터 리액트 네이티브 자마린 운영 회사 구글 페이스북 마이크로소프트 출시년도 2017년 2015년 2011년 개발 언어 다트 자바스크립트 C# 장점 높은 생산성 빠른 성능 핫 리로드 핫..