Hello App (35) 썸네일형 리스트형 Flutter _ Header 230518 자 이제 Flutter는 Widget으로 이루어져 있고 어떻게 사용되는지 확인 했으니 실제로 무언가를 만들어보자. https://dribbble.com/shots/19858341 Financial Mobile IOS App dribbble.com 위 사이트의 디자인을 참고해 만들어 보겠다. 위 사진과 같은 디자인을 만들기 위해 우선 배경 부터 건들어 보겠다. 1. Background Color 배경은 Scaffold의 Color? backgroundColor를 사용하면 된다. 위 코드와 같이 backgroundColor에서 Colors에 색을 입힐 수 있다. .method로 옵션 설정이 가능하다. 하지만 우리가 원하는 것은 검은 배경이므로 위와같이 black으로 바꿔 주었다. 2. Colum.. Flutter _ VScode Extention, Project Create, Widget 230517 우여곡절 끝에 모든 error를 잡고 flutter 환경 세팅이 끝났다. 이제 실제로 Project를 만들어 학습 및 구현을 해보자. 1. Flutter Create Project flutter의 모든 환경 세팅이 끝났다면VScode에서 2가지 방법으로project가 생성 가능하다.( Window 기준이다. ) ✨ Ctrl + Shift + P ( 명령 팔레트 ) 위와 같이 명령 팔레트에서 flutter를 검색하면아래에 Flutter : New Project를 볼 수 있다.클릭!( Flutter : Run Flutter Doctor도 가능하다! ) 우리는 Application을 만들어야 하기 때문에 맨 위의 Application 클릭! 만약 다른 목적의 template가 필요한 경우에는 선택.. Flutter _ VScode cmd 터미널 pub get error & Unable to find git in your PATH 230517 약 5시간의 구글링 및 시도 끝에 Flutter의 환경 세팅중 VScode의 터미널 (cmd)에서flutter 를 쳤을 경우 터미널 꺼짐 현상과프로젝트를 열었을때 git PATH를 인식하지 못하는 현상을해결했다. 정말 위의 키워드를 검색해서모든 구글링 결과물을 본것같다. 많은 사람들의 상황이 다 다르고해결 방식도 다르겠지만 나의 처한 상황과 문제가 같은 사람이방황하지 않고한번에 문제를 해결하길 바라며포스팅을 한다. 나의 문제 상황은 VScode에서 Flutter 프로젝트를 열었을때 1. pub get error가 반복해서 같이 올라옴 2. Dart(확장)를 reroad 해야한다고 반복 메세지가 뜸 이 문제는 flutter의 프로젝트를 실행하는데 있어 기본적인 추가 패키지를 자동으로 다운 받아.. Flutter_ 설치 230515 그럼 본격적으로 앱을 만들기 전에 Flutter를 설치해보자. 1. flutter.dev 홈페이지 ▶ Get Started ▶ Install 페이지 https://docs.flutter.dev/get-started/install Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and ChromeOS operating systems. docs.flutter.dev 우선 위의 사이트로 들어가서 본인의 운영체제에 맞게 선택해준다. 그리고 위와 같이 .zip 파일을 다운 받고 path를 설정해 주면 끝! 2. Chocolatey 사용 https://astrum93.tistory.com/70 .. Flutter 230515 flutter는 google에서 2017년 5월 출시된 모바일, 웹 , 데스크톱 크로스 플랫폼 GUI SDK이다. 하나의 코드 베이스로 안드로이드, 리눅스, Windows, macOS , iOS 및 웹 브라우저 심지어 임베디드까지 다룬다. 사용 언어는 Dart이다. 💡 GooglePay, plutter로 재설계하다. 구글의 Google Pay는 plutter로 리뉴얼 하면서 170만줄의 코드가 110만줄의 코드로 줄었고 개발자들의 시간중 60~70% 가량 절약했다. 현재 GooglePay는 1억명 이상의 사람들이 사용한다. 1. How Flutter Works Flutter가 기존의 Native Framework와 가장 다른점은 버튼이나 text input 등 모든 요소를 운영체제에게 부탁하.. Dart _ 기초 예제 5 230514 오늘은 Dart의 Class에 대해서 실습해보자. 19. Class Dart의 Class는 위와 같이 선언한다. 그리고 아래의 main()에서 새로운 변수를 클래스의 인스턴스로 선언할 수 있다. 만약 클래스의 인스턴스의 값을 변경 불가능하게 바꾸고 싶다면 final을 사용하면 된다. 위와 같이 final을 변수 앞에 선언하면 간단하게 변경 불가능한 변수로 바꿀 수 있다. 선언한 sayHello()를 실행 시키면 위의 print문이 출력된다. 20. 생성자 (Constructors) Class에 생성자를 만들때는선언한 변수 앞에 late를 붙여줘야한다. Dart는 값이 없는 것을 싫어하기 때문이다. 그리고 아래와 같이 this를 이용해서 함수를 선언할 수 있다. 그럼 위와 같이 내가 원하는 인.. Dart_기초예제 4 20230513 오늘은 Dart의 Funtion에 대해서 알아보자. 14. Defining a Function 14-1 void? 위와 같이 sayHello 라는 함수를 선언했다. 하지만 항상 void라는 단어가 따라 붙는다. void는 해당 함수가 아무것도 return하지 않는다는 뜻이다. 따라서 위와 같이 void를 문자열로 return할 경우 error가 발생한다. 만약 return을 받고 싶다면 위와 같이 void 대신하여 넣어주면 된다. 14-2 only main()? 또한 꼭 main함수 안에 선언할 필요가 없다. 위와 같이 main 함수에서 위에서 선언한 함수를 활용하여 출력할 수 있다. 14-3 fat arrow syntax fat arrow syntax란 기호는 => 를 뜻하고 위와 같이.. Dart_기초 예제3 230512 8. Data Type 앞서 설명했듯이 Dart는 String, bool, int, double등의데이터 타입이 있고 특이한 점은int, double이 상속 받아서 쓰는 num이라는 Datatype이 있다.따라서 num 데이터 타입은 실수와 정수를 다 가질 수 있다. 9. List Dart의 list 또한 위의 변수 선언 처럼 어렵지 않다. 💡 collection if collection if는 if로 존재할 수도 안할 수도 있는 요소를 가지고 만들 수 있다. 위와 같이 giveMeFive 라는 변수가 존재하고, numbers3 라는 리스트 안에 if문을 아이템 자리에 넣으면, 디버그 콘솔 창에서 위와 같이 5가 포함되어 출력된다. 10. String interpolation 위와 같이 두 .. 이전 1 2 3 4 5 다음
