프로그래밍124 [Flutter] 6. Drawer서랍 메뉴 만들기 앱에 내비게이션 메뉴를 추가하는 일반적인 방법은 서랍(Drawer)을 이용하는 것입니다. 앱에 서랍을 만들면서 Flutter와 더 친해져 보도록 합시다. 이번 포스트는 다음 내용을 다루고 있습니다. scaffold에서 Drawer 사용하기 MenuDrawer 클래스 만들기 Scaffold에서 Drawer 사용하기 지금까지 진행된 앱은 아래와 같이 인트로 화면이 하나만 있는 상태입니다. 이 화면에 메뉴로 서랍(Drawer)을 추가해 보도록 하겠습니다. Flutter에서는 Scaffold안에서 Drawer를 사용할 수 있습니다. Scaffold에는 Drawer을 사용하는 drawer 속성이 있습니다. Drawer는 ListView와 같은 단일자식(child)을 가질 수 있습니다. 일반적으로 서랍에는 앱 이름.. 2022. 2. 18. [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. 이전 1 ··· 19 20 21 22 23 24 25 ··· 31 다음
