Flutter18 Flutter 데모 앱 살펴보기 3 - interactivity, navigation 플러터 코드랩 예제가 재미있기 때문에, startup_namer, part2 도 한 번 살펴보겠습니다. 이 예제에서는 리스트 아이콘을 통해 새로운 페이지로 이동하는 코드가 담겨 있습니다. 프로젝트 생성하기 코드랩 따라하기 코드랩에서 안내하는 대로 샘플 프로젝트를 생성해보겠습니다. 터미널을 켜서 flutter create startup_namer로 플러터 프로젝트를 생성해줍니다. (startup_namer part1 프로젝트가 동일한 이름을 쓰고 있었기 때문에 기존 프로젝트 이름을 변경해주었습니다.) 그 다음 startup_namer 프로젝트로 이동해서 flutter pub add english_words 커맨드를 통해 english_words 패키지를 플러터 프로젝트 패키지 관리 파일인 pubspec.y.. 2022. 10. 8. Flutter Material 디자인 - BottomNavigationBar (탭 바) 플러터의 Material 디자인이 담긴 Material 위젯에서는 탭 바를 BottomNavigationBar 클래스에서 제공하고 있습니다. Material 위젯에서 기본적으로 제공하는 샘플을 통해 동작을 살펴보겠습니다. Bottom Navigation Bar는 클릭한 탭의 정보를 업데이트해서 보여주기 때문에 Stateful 위젯이고, 화면 구성 시에 주로 Scaffold 위젯에서 하단에 Floating Action Button 대신 Bottom Navigation Bar를 보여주는 형식을 따르게 됩니다. Bottom Navigation Bar에서 개별 탭은 BottomNavigationBarItem 위젯을 통해 구성하고 있습니다. Bottom Navigation Bar 샘플 프로젝트 생성 후 실행하기 .. 2022. 10. 6. Flutter 데모 앱 살펴보기 2 - Widget과 외부 패키지 사용법, 스크롤 기능 플러터 코드랩에서는 https://docs.flutter.dev/get-started/codelab#step-1-create-the-starter-flutter-app 라는 예제를 통해 Widget 다루는 방법, 외부 패키지를 불러들여 사용하는 방법, ListView를 통한 스크롤 기능을 소개하고 있습니다. 기본적으로 생성되는 데모 앱 다음 단계로 다루기 좋은 내용이라 한 번 살펴보도록 하겠습니다. 터미널에서 앱 생성하기 코드랩 예제는 터미널에서 플러터 앱 생성하는 방법으로 시작하고 있어서 저도 터미널에서 해당 프로젝트를 먼저 생성했습니다. 전체적으로는 터미널에서 iOS 시뮬레이터를 띄우고 (open -a Simulator), startup_namer라는 플러터 앱을 생성한 후 (flutter creat.. 2022. 10. 5. Flutter 데모 앱 살펴보기 1 - 디버깅 속도를 높여주는 Hot Reload 플러터 앱에서 기본적으로 생성해주는 데모 앱이 어떻게 구동되는지 살펴봅시다. 'Flutter Demo'라는 이름이 붙은 이 앱은 플러터의 기본 기능 중 Hot Reload, StatelessWidget과 StatefulWidget의 차이를 이해할 수 있게 간단한 카운터 기능만 제공하고 있습니다. 데모 앱을 실행하기 전에 터미널에서 Android Studio를 실행시키는 방법을 알아보고, 플러터 프로젝트도 터미널에서 Android Studio를 실행과 동시에 바로 열어보도록 하겠습니다. 터미널에서 Android Studio 실행하기 터미널에서 Android Studio를 바로 열기 위해서는 터미널에서 Android Studio 실행파일 경로를 오픈하는 명렁어를 입력해주면 됩니다. 다만 이렇게 하면 매번 실.. 2022. 10. 4. 이전 1 2 3 4 5 다음
