꿈꾸는 헤븐리 콜링켑 블로그

3. 화면 전환 앱 만들기  ★3개 화면을 가지고 있는 앱 만들기Named Route를 사용세 개의 화면 이름은 "HomeScreen", "DetailScreen", "SettingsScreen"으로 구성각 화면이 전환되도록 구현3.1 앱 구성 - 3개 화면 만들기1) material.dart 패키지 import- Material 디자인 위젯 가져오기(앱의 UI 만들 때 필요한 기본 패키지)2) main 함수- runApp()은 Fluttr 앱 실행- runApp(MyApp())은 MyApp을 앱의 루트 위젯으로 설정3) MyApp 클래스- 앱의 구조 정의 - 앱의 전체 구조 정의하는StatelessWidget- 필수 메서드 build  오버라이드하여 앱 UI 구성- MaterialApp을 반환title..

2. 화면 이동 시 데이터 전달하고 이동된 화면에 표시  ★ 전달한 데이터가 두 번째 화면에서 보이는 앱 만들기HomeScreen에서 DetailScreen으로 문자열 데이터 전달DetailScreen에서 해당 데이터를 표시2.1 2개 화면 만들기 - 앱 구성1) material.dart 패키지 import- Material Design 스타일의 UI 요소를 제공하며, 전반적인 앱의 레이아웃과 스타일을 설정2) main 함수- Flutter 앱의 시작 / main 함수는 프로그램 실행 시 가장 먼저 호출- runApp()은 위젯을 화면에 그릴 때- runApp(MyApp())은 MyApp을 앱의 루트 위젯으로 설정3) MyApp 클래스- 앱의 구조 정의- MaterialApp을 반환하므로, 앱의 전반적인..

1. 내비게이션 구현하기  ★ 2개의 화면으로 구성된 앱 만들기2개의 화면 "HomeScreen" 과 "DetailScreen" 만들기HomeScreen에서 버튼 누르면 DetailScreen으로 이동DetailScreen에서 뒤로 가기 버튼을 누르면 다시 HomeScreen으로 돌아갈 수 있음1.1 2개 화면 만들기 - 앱 구성1) material.dart 패키지 import- Material Design 스타일의 UI 요소를 제공하며, 전반적인 앱의 레이아웃과 스타일을 설정2) main 함수- Flutter 앱의 시작 / Dart 프로그램 진입 - runApp()은 위젯을 화면에 그릴 때- runApp(MyApp())은 MyApp을 앱의 루트 위젯으로 설정3) MyApp 클래스- 앱의 구조 정의- M..

1. 사용자 입력 처리 * TextField - 사용자에게 글을 입력받는 위젯# 텍스트 필드(Do it! 깡샘 플러터&다트 p. 262)TextField( style: TextStyle(fontSize: 15), textAlign: TextAlign.center) * TextEditingController - 입력된 데이터 얻기* InputDecoration - 꾸미기 * textInputAction - 액션 버튼 * keyboardType - 키보드 유형 * obstureText - 텍스트 감추기 * maxLines, misLines - 여러 줄 입력       ★ 사용자 이름 & 이메일 주소 입력 받기2개의 TextField (사용자 이름, 이메일 주소)각 TextField위에 라벨 표시하고, 힌..

1. 위젯 배치 - 방향 설정, 위치 설정* Row - 가로 위젯 배치 / Column - 세로 위젯 배치* 레이아웃도 하나의 위젯이므로 중첩 가능* mainAxisSize - 크기 설정(main axis: 기본축 / cross axis: 교차축)* Alignment - 배치 설정   ★ 3x3 계산기 버튼 레이아웃Container 위젯 사용 (Container는 스타일링할 수 있는 "상자", 위젯 크기, 패딩, 마진, 컬러, 배치 등) 크기는 80x80, 색상은 grey, 버튼 사이 간경은 10pixel   * Stack - 겹쳐서 모두 보이기 * IndexStack - 겹쳐서 하나만 보이기* Align - 특정 위치에 배치* FractionalOffset - 왼쪽 위를 기준으로 배치* Position..

1. 위젯* 위젯: 화면에 보이는 뷰, 화면과 관련된 모든 것(화면 구성)보이는 위젯보이지 않는 위젯  ▶ 플러터: 위젯으로 사용자 I/F를 만들어 화면 구성  ▶ runApp() 함수: 위젯트리를 만든다! / 최상위 위젯 객체 전달?  ▶ 위젯은 불변(불변 객체) → 정보 갱신은 새로운 객체를 다시 생성해야  ▶ 그러나!! 위젯은 실제 화면이 아니다!! 즉, 실제 화면은 플러터 프레임워크에서 만들어 사용   ▶ 3가지 클래스 중 하나를 상속(InheriteWidget, StatelessWidget, StatefulWidget)InheriteWidget: 여러 위젯에서 공통으로 이용할 화면에 업데이트 되는 데이터(상태) 관리StatelessWidget: 화면에 업데이트 되는 데이터를 관리하지 않는 정적인..