반응형

앱 만들기 프로젝트/Flutter 37

Flutter - 3.3 VSCode Settings

지금까지 Flutter를 보면서 계속 나와 있던 파란줄.파란줄에 마우스를 올려다보면 다음과 같은 안내문구가 나온다:Use 'const' with the constructor to improve performance.Try adding the 'const' keyword to the constructor invocation.const를 추가하면 performance가 좋아진단다.const는 compile하기 전에 '이미' 알고 있는 값으로 하여 메모리를 차지하지 않도록 한다.ex)const a = 10;const b = 20;var c = a + b;이렇게 했다면 compile을 할 때에는 다음과 같이 바뀐다고 한다.var c = 10 + 20;그냥 a 와 b는 메모리를 차지 하지 않도록 없애버리고 값을 ..

Flutter - 3.2 Buttons Section

이번에는 아래의 사진 부분을 만들어본다고 한다.이번에 추가한 부분은 다음과 같다:              SizedBox(                height: 120,              ),              Text(                'Total balance',                style: TextStyle(                  fontSize: 22,                  color: Colors.white.withOpacity(0.8),                ),              ),              SizedBox(                height: 5,              ),              Tex..

Flutter - 3.1 Developer Tools

이거다.지금까지 만든 앱의 현재 상황을 간략하게 보여주는 역할을 한다.그리고, Main Axis와 Cross Axis의 정렬 방향도 실시간으로 보여주고 여기에서 변경도 가능하다.그리고... 왼쪽 위에 있는 'Select Widget Mode' 버튼을 누르면 실행중인 에뮬레이터로 가면 왼쪽의 사진처럼Widget들을 선택할 수 있다그리고 Widget Details Tree를 통해서 Widget의 자세한 정보들을 모두 확인할 수 있다.       이 사진은 Widget Details Tree를 통해서 선택한 Widget의 자세한 정보를 볼 수 있는 곳이다.     왼쪽 사진은 1번 사진의 오른쪽 위쪽 부분에 있는 5개의 버튼(다음 사진에 있는 것을 말한다.)에서 왼쪽에서 두 번째 버튼을 누르면 나오는 화면이다..

Flutter - 3.0 Header

https://dribbble.com/shots/19858341-Financial-Mobile-IOS-App Financial Mobile IOS App dribbble.com여기에 있는 디자인을 따라서 해본다고 한다.(단순히 UI만 따라서 할 것이다.)나는 'ColorZilla'라는 chrome extension을 이용해서 색상을 가져왔다.진행한 내용은 다음과 같다: appBar를 제거한다. -> 제목 없이 모두 body에 때려박는 것 같다. (AI가 만들어주던 앱은 appBar를 사용하던데...)backgroundColor : 배경화면이 #181818인데, 이를 '0xFF'를 앞에 붙이고 뒤에 181818를 붙여주면 된다.Padding을 통해서 좌우의 공백을 만들어준다.SizedBox를 이용해서 위의..

Flutter - 2.3 Hello World

나는 flutter 설치 하는게 생각보다 조금 복잡해서, 설치할 때마다 강의를 찾아서 따라하는 편이다(2.0, 2.2)... 편하다...만약 설치하기 귀찮다면, dartpad.dev에 들어가면 설치 없이도 할 수 있다.(하지만, 새 파일을 만들 수 없다.)완전히 기초부터 시작할 것이다.flutter는 Widget들로 이루어져 있다.여기서 Widget은 레고 블럭이라고 생각하면 되는데, flutter에서는 이 Widget들을 합치는 방식으로 앱을 만든다.그래서 flutter를 보면 알겠지만 전부 Widget 떡칠이다.아래는 main 함수로 App이라는 이름의 Widget을 run한다는 뜻이다.그래서 'App'은 우리 앱의 'root Widget'이다. -근본 위젯-void main() {  runApp(A..

Flutter - 1.4 Flutter vs React Native

둘 다 여러가지 운영체제를 서비스 하기 위한 언어이다.그럼 어떤 것을 사용하는 것이 더 좋을까?(물론, 나는 flutter를 쓰겠지...)React Native운영체제가 자체적으로 제공하는 위젯을 사용하고 싶을 경우 사용iOS와 안드로이드에서 다르게 보임.자바스크립트를 통해 운영체제와 소통 -> 네이티브 앱Flutter엔진으로 모든 컴포넌트 렌더링 -> 네이티브 앱'처럼' 만들어야 함.디자인이나 애니메이션 등을 전부 직접 만지고 싶을 때 더 유용함.Dart 언어 공부해야 함 -> 쉽긴 함.많은 사람들은 javascript에 익숙해서 react native로 시작하는 사람이 있을 것이다.그런데, 나는 그냥 C와 python만 연구를 위해 사용한 게 전부라서 모른다.그래서 나는 flutter로 시작한다.....

Flutter - 1.3 How Flutter Works

Flutter는 ios, android, windows 등등 거의 모든 환경에서 실행 가능하다.어떻게 이게 되는 걸까?nomadcoders의 강의와 flutter 공식 문서를 기초 내용으로 할 것이다.공식문서 출처(Flutter architectural overview): https://docs.flutter.dev/resources/architectural-overview네이티브 앱 개발을 할 경우(Swift로 iOS, Java로 안드로이드)운영체제와 직접적으로 대화.Flutter로 개발하는 경우운영체제와 직접적으로 소통 X -> ex) 실제 안드로이드 버튼을 만들어내는 기능 X공식문서에서는...During development, Flutter apps run in a VM that offers sta..

반응형