개발부터 자유까지

- UI 그리기 연습 시리즈는 아래 링크의 홈화면을 그려보는 포스팅입니다. https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App Financial Mobile IOS App dribbble.com - 코드 설명 (코드 작성 순서로) 카드를 만들기전에 "Wallets", "View All" 텍스트를 넣어야 한다. Row 위젯을 선언하고, children 속성안에 Text 위젯 두개를 넣는다. 텍스트 위젯을 떨어뜨리기 위해 mainAxisAlignment 속성에 MainAxisAlignment.spaceBetween값을 넣고, Row의 바닥에 두 텍스트를 위치시키기 위해 crossAxisAlignment 속성에 CrossAxisAlignment.end..

- UI 그리기 연습 시리즈는 아래 링크의 홈화면을 그려보는 포스팅입니다. https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App Financial Mobile IOS App dribbble.com - 코드 설명 (코드 작성 순서로) 이전 포스팅에서 Container 위젯으로 버튼을 만들었는데, Container 위젯을 반복하지말고, Button 클래스를 만들어서 위젯으로 사용할 예정입니다. Button.dart 파일에 Button 클래스를 생성합니다. Button 클래스는 StatelessWidget 위젯을 상속받는 형태입니다. 버튼이 두개이기 때문에 main.dart에서 Button 클래스의 생성자를 호출할때마다 글자, 배경색, 글자색을 다르게 ..

- UI 그리기 연습 시리즈는 아래 링크의 홈화면을 그려보는 포스팅입니다. https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App Financial Mobile IOS App dribbble.com - 코드 설명 (코드 작성 순서로) "Total Balance" 스트링을 넣기전에 Row 밑에 SizedBox로 적당한 간격을 만들어준다. "Total Balance" 와 "$ 5 194 832"를 Text 위젯으로 생성해준다. 두 스트링 사이에 적당한 간격을 위해 SizedBox를 넣어주고, 아래 Transfer 버튼과의 간격을 위해 SizedBox를 다시 넣어준다. 버튼이 두개가 들어가기 때문에 Row 위젯을 먼저 선언하고, Row의 children ..

- UI 그리기 연습 시리즈는 아래 링크의 홈화면을 그려보는 포스팅입니다. https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App Financial Mobile IOS App dribbble.com - 최종 완성본 모습 - 코드 설명 (코드 작성 순서로) Scaffold 클래스 안에 appbar 속성은 존재하지 않으므로 사용할 필요가 없고 body와 backgroundColor를 사용합니다. body속성은 Widget으로 이루어져 있기 때문에 위젯들을 담기위해 Column(1번)으로 위젯을 생성합니다. (Row로 body 컨테이너를 만들 수 있을 듯) Column(1번) 위젯은 children 속성을 필수로 사용해야 하는데, children 속성은 ..

Flutter 설치는 필자가 아래 링크 내용을 따라가면서 작성한 내용입니다. https://docs.flutter.dev/get-started/install/linux Linux install How to install on Linux. docs.flutter.dev 1. snap 라이브러리가 설치되어 있으면 아래 명령어로 간단하게 설치 sudo snap install flutter --classic 아래 명령어는 flutter가 어떤 상태인지 나타내는 명령어로, 설치하면서 중간중간 설치 오류를 나타내기 때문에 수시로 확인한다. flutter doctor 리눅스에 크롬이 기본적으로 설치되어 있지 않기 때문에 설치해준다. 2. 크롬 다운로드 wget https://dl.google.com/linux/dir..

- Flutter에서 모두 Widget으로 구성된다. - Widget을 만든다는 것은 class를 만든다는 것이다. - main 함수에서 App 위젯을 구동시킨다. (App 위젯은 root가 되는 Widget이다.) - App 클래스는 flutter SDK 안에 있는 3개의 core Widget중 하나를 상속받아야 위젯이 되는데 여기서는 StatelessWidget을 상속받음로써 위젯이 된다. - StatelessWidget 위젯은 build 메소드를 구현한다. (모든 위젯은 빌드 메소드를 구현) - build 메소드는 return 하면서 UI상의 무언가를 그려주는 역할을 한다. - 다시말해 build 메소드는 widget을 리턴하면서 UI를 그린다. - root widget인 App은 두가지 스타일중..

VScode에 Flutter extension을 설치하면 Dart extension이 같이 설치가 되는데 계속 Dart가 제대로 설치되지 않았음. 검색하다보니 VScode의 업데이트 문제일 수 있음을 발견함 VScode가 업데이트 되는지 체크(check for updates)해보니 아래와 같은 에러 팝업 발생. VS code 삭제 후 재설치하니 Dart문제 해결!!