Flutter (영업비밀) 앱개발 자주 쓰이는 금주의 위젯 살펴보기 frequently used widgets 3년간 플러터로 인터페이스 화면을 그리다 보니 자주 쓰이는 위젯이 몇 가지 있었습니다. 오늘은 플러터로 앱을 개발할 때 알아두면 좋은 위젯들을 살펴보겠습니다. 1. Listview, ListviewBuilder 2. Row, Column 3. SizedBox 4. Container 5. GestureDetector 6. SafeArea 7. ElevatedButton, OutlinedButton, TextButton, IconButton 8. Text, RichText, TextSpan 9. Flex, Flexible 10. Spacer 11. ClipRRect 12. Image 13. WillPopScope 14. Stack, Positioned 15. Semantic Scaffold 위젯은 앱 디자인.. 2022. 6. 14. Flutter 앱 만들기 4단계 : 플러터 코딩 계수기 앱 만들기 오늘은 디자인을 직접 플러터 코드로 옮겨보겠습니다. 여러분 인생에서 코딩을 할거라고 상상이나 해보셨나요? 저에게도 참 두근대는 시간이네요. 오늘의 작업 순서는 아래와 같습니다. 1. 새 플러터 프로젝트 만들기 2. 에뮬레이터(시뮬레이터) 실행하기 3. 디자인을 코드로 옮기기 자, 프로젝트 폴더 만들기부터 시작해볼까요? 1. 새 플러터 프로젝트 만들기 먼저 프로젝트를 만들고 싶은 폴더 위치에서 터미널(윈도우는 명령 프롬프트)를 실행해야 합니다. 저는 바탕화면에 Dev라는 폴더를 만들고 그 안에 모든 프로젝트를 관리하고 있습니다. flutter create는 새로운 플러터 프로젝트를 만드는 명령어입니다. create 옆에 my_app은 프로젝트 이름이죠. flutter create my_app 이 명령어를 .. 2022. 5. 16. Flutter 앱 만들기 3단계 : 5분만에 앱 디자인하기 로고부터 디자인을 해볼 건데요. 로고는 키워드만 넣으면 자동으로 만들어주는 곳이 있습니다. 아래 링크를 누르고 들어가서 여러분의 앱 키워드만 검색하면 알맞는 로고들을 추천해줍니다. *상업용으로 사용하기 위해 저작권이 필요하다면 결제가 필요합니다. Online Logo Maker - Make a Logo for Free Discover 10000+ professional grade logo designs now. www.designevo.com 나중에 로고 디자인을 할 줄 아시는 분은 직접 만드셔도 좋고, 크몽에서 로고 제작을 의뢰해도 좋습니다. 개인 프로젝트를 진행하는 동안에는 여기서 무료 로고를 사용해 봅시다. 저는 커피를 몇 잔 마셨는지 세는 앱이기 때문에 아래와 같은 로고를 만들었습니다. 사실 앱에.. 2022. 5. 12. Flutter 앱 만들기 2단계 : 앱 퀄리티 높아보이는 디자인 준비하기 이번 시간에는 어떻게 하면 디자이너가 만든 앱처럼 예쁘게 만들 수 있는지 알아보는 시간입니다. 앱 디자인 관련 강의는 따로 포스팅하도록 하겠습니다. 여러분의 앱 디자인 퀄리티를 높여줄 몇 가지 요소만 간단하게 짚고 넘어가도록 하죠. 여러분은 곧 플러터로 UI를 만들게 될텐데요. UI는 유저 인터페이스(User Interface)의 약어입니다. 쉽게 말하면 사용자가 앱과 상호작용하는 글, 그림, 버튼 등 화면에 그려진 모든 것을 의미하죠. 그리고 여러분이 자주 들으셨던 UX는 사용자 경험(User eXperience)의 약어입니다. 여러분은 UI와 UX의 차이를 아시나요? 쉽게 말해 UI가 포장도로라면 UX는 비포장도로입니다. 우리는 리스트가 있으면 세로로 스크롤하는 걸 당연하게 여기고 화면을 아래로 스크.. 2022. 5. 7. Flutter 앱 만들기 1단계 : 기획하기 이제부터 여러분이 여러분만의 앱을 직접 만들어 보려고 하는데요. 지금 단계에서는 너무 일을 크게 벌이지 않고 코딩에 재미를 들이는 게 중요합니다. 그러기 위해서는 당장 여러분에게 필요한 걸 만드는 게 가장 욕심도 나고 더 잘 만들고 싶은 욕구도 생기죠. 앱으로 사업을 하는 경우가 많다보니 처음부터 완벽해야 한다고 생각하는 분들이 많으신데요, 완벽해서 나쁠 게 없죠. 하지만, 이 세상에 완벽한 건 없습니다. 여러분이 자주 사용하시는 앱이나, 전 세계에서 열광하는 리그 오브 레전드라는 게임에서도 매번 패치를 할 때마다 버그가 생기죠. 그렇게 많은 직원들이 일해도 초기에 발견하지 못 하는게 버그입니다. 계속해서 발전해나간다고 생각하세요. 플러터에서 기본 예제로 제공하는 숫자 증가 기능을 이용해서 여러분들과 함.. 2022. 5. 3. Flutter 첫 프로젝트 - my_app 코드 간단 설명 (2/2) *주의 : 이 강의는 비전공자의 이해를 돕기 위한 강의로 실제내용을 각색했음을 알립니다. 맛보기이니 외우려 하지 마시고 천천히 훑어보기만 하세요! 이어서 MaterialApp에 대해 알아보죠. 지난 시간에 Material이 건축양식이라고 말씀드렸죠? MaterialApp은 그 양식에 맞춰 만든 앱이라는 뜻이 됩니다. 이 양식에 따르면 몇 가지 필요로 하는 정보가 있어요. 예를 들면 건물 이름이, 건물 테마, 인테리어죠. MaterialApp의 괄호 안에 title이라고 적혀 있는 게 바로 (건물 이름 = 프로젝트 이름)인데요. 어디 다른데에 노출되는 정보는 아닙니다. 그저 여러분의 앱 이름이 무엇인지 적어놓을 뿐이에요. 그 다음에 theme이라고 적힌 게 바로 (건물 테마 = 앱의 테마)입니다. 앱 전체.. 2022. 4. 29. Flutter 첫 프로젝트 - my_app 코드 간단 설명 (1/2) *주의 : 이 강의는 비전공자의 이해를 돕기 위한 강의로 실제내용을 각색했음을 알립니다. 맛보기이니 외우려 하지 마시고 천천히 훑어보기만 하세요! 이제 본격적으로 플러터를 뜯어보도록 하죠. 윈도우 사용하시는 분들은 F5, 맥을 사용하시는 분들은 Fn+F5를 눌러서 처음 앱을 실행하고 나면 별거 없습니다. 오른쪽 아래에 있는 파란색 +버튼을 누르면 화면 중앙에 있는 숫자가 1씩 늘어나는 앱입니다. 여러분이 만든 my_app 폴더의 main.dart 파일에 있는 코드를 주석만 지워서 그대로 가져와 볼게요. main.dart에 있는 몇 줄 없는 코드만으로 이 앱이 실행된 거거든요. import 'package:flutter/material.dart'; void main() { runApp(const MyApp.. 2022. 4. 28. Xcode 시뮬레이터 실행하는 법 여러분이 Flutter 앱을 개발을 위해서 Xcode에서 여러분의 컴퓨터에 가상의 아이폰을 하나 실행해야 합니다. 가상의 아이폰은 시뮬레이터라고 부릅니다. 여러분의 아이폰을 직접 컴퓨터에 연결해서 개발할 수도 있어요. 하지만, 애플 개발자 계정으로 20만원 주고 가입해야하고, 휴대폰 수명이 짧아질 수도 있기 때문에 개발은 시뮬레이터에서 하는 게 좋아요. (실제로 제가 사용하던 갤럭시 폰으로 개발을 했다가 배터리가 30분도 못가서 휴대폰을 바꾸게 됐죠...) 아무래도 가상의 휴대폰이다보니 모든 기능을 다 사용할 수는 없어요. - 전화 불가 - 카메라 사용 불가 - GPS 위치 추적 불가 만약 여러분이 나중에 개발하다가 위의 3가지와 관련된 기능을 개발해야 한다면, 테스트용 휴대폰을 구매하시고 컴퓨터에 연결.. 2022. 4. 25. Flutter 첫 프로젝트 가상 휴대폰으로 실행시키기 여러분 플러터 설치까지 따라하시느라 고생하셨습니다! 이제 함께 플러터 첫 프로젝트를 만들어 볼게요. 순서는 아래와 같습니다. 1. 플러터 프로젝트 만들기 2. 앱을 빌드할 시뮬레이터 실행하기 3. 조작해보고 코드별 의미 알아보기 1. 플러터 프로젝트 만들기 맥을 사용하시는 분들은 터미널 프로그램을 실행해주세요. 윈도우를 사용하시는 분들은 명령 프롬프트를 실행해주세요. 그리고 아래 명령어를 복사 붙여넣기하고 실행시켜주세요. 아래 명령어는 여러분의 플러터 프로젝트를 자동으로 만들어 주는 코드입니다. flutter create my_app 성공적으로 실행됐다면 아래의 코드를 복사 붙여넣기 해주세요. cd는 경로를 이동하는 명령어에요. 방금 만들어진 프로젝트 폴더로 경로를 이동하는 명령어 입니다. my_app이.. 2022. 4. 24. 이전 1 다음
