분류 전체보기137 [Flutter] 5. 화면별 파일 분리, 테마 적용, 위젯 트리 지난 포스트에 이어서 Hello world프로젝트를 리팩토링 해보겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. 화면별 파일 분리 테마 적용하기 widget tree(위젯 트리) widget inspector 브라우저에서 실행 main.dart파일에 Flutter앱의 모든 화면을 작성할 수 있지만, 앱의 화면수가 많아지고 앱 기능이 커짐에 따라 하나의 파일이 거대해 질 수 있습니다. 애플리케이션의 각 화면에 대한 파일을 갖는 것이 흔히 화면을 관리하는 접근방식이므로 각 화면 별로 파일을 가지도록 수정해 보겠니다. 화면별 파일 분리 현재 main.dart코드는 아래와 같습니다. 위 소스의 선택된 부분을 잘라내어 새 파일로 이동시킬 계획입니다. 먼저 lib폴더에 새 폴더를 screens라는 새 폴더를.. 2022. 2. 17. [Flutter] 4. Scaffold 사용해서 앱 처럼 꾸미기 지난 포스트에서 만든 Hello World는 실제 앱이지만 앱처럼 보이지 않습니다. Scaffold 위젯을 사용하여 레이아웃을 잡고, 여러 속성을 사용해서 실제 앱의 모양처럼 만들어 보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. Scaffold 위젯 사용하기 위젯을 빠르게 감싸주는 방법(전구 이용, ctrl + .) 에셋(asset) 이용해서 배경 이미지 넣기 가독성 좋게 text수정하기 Scaffold 위젯 사용하기 현재 Hello World앱은 아래와 같은 모습입니다. 스케폴드는 다른 모든 위젯을 배치하는 기본 레이아웃 구조를 생성하므로 자주 사용하는 위젯중 하나입니다. home에서 Center와 Text 위젯을 제거하고 Scaffold를 추가해 보겠니다. home에 Scaffold.. 2022. 2. 16. [Flutter] 3. hello world 코드 분석 지난 포스트에서 플러터 신규 프로젝트를 생성하였고, 에뮬레이터의 앱에서 hello world를 출력해 보았습니다. 이제 hello world프로젝트를 가볍게 분석해 보면서 플러터와 친해져 보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. 위젯이란? StateLessWidget shortcut 이용해서 생성하기 extends dart에서 new를 사용하지 않는 객체 생성 StatelessWidget 위젯 중첩 hello world 프로젝트 분석하기 vscode의 팔레트에서 flutter new project로 신규 프로젝트를 생성하였고, lib폴더 아래 있는 main.dart파일을 아래와 같이 수정하였습니다. 1번째 라인에 material.dart 라이브러리를 임포트 하고 있습니다. 이 패키.. 2022. 2. 15. [Flutter] 2. 플러터 개발 환경 설정 Flutter의 개발 환경 설정을 한 후 hello world프로젝트를 작성해 보겠습니다. 이번 포스트는 아래 내용을 다루고 있습니다. 개발 환경 선택 Flutter SDK 다운로드 및 설치 Visual Studio Code 설치 및 플러터 확장 프로그램 설정 안드로이드 스튜디오 인스톨 및 설정 플러터 프로젝트 만들기 플러터 앱 안드로이드 에뮬레이터로 실행하기 개발 환경 선택 플러터 앱을 개발할 때 Windows, Linux 또는 Chrome OS 데스크톱이나 Mac을 사용할 수 있습니다. 하지면 여기에도 몇 가지 제약이 있습니다. iOS용 앱을 테스트하고 배포하려면 Mac이 필요합니다. 데스크톱용 개발시 에는 대상 앱과 동일한 플랫폼에서 해야 합니다. 즉 MacOS용으로 개발하려면 Mac이 필요하고, .. 2022. 2. 14. 이전 1 ··· 22 23 24 25 26 27 28 ··· 35 다음
