7. 인터페이스 개발 & 내비게이션 (1)

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 클래스

- 앱의 구조 정의

- MaterialApp을 반환하므로, 앱의 전반적인 설정 처리 및 테마와 HomeScreen 화면을 지정

• title은 앱의 제목
• theme은 앱의 생상 테마 
• home은 앱이 처음 실행될 때 표시할 화면

 

1.2 2개 화면 만들기 - HomeScreen 화면

1) HomeScreen 클래스

- 앱의 첫 화면

- StatelessWidget을 상속받아서 상태 변화가 없는 화면

- Scaffold를 반환하며, 이는 앱의 기본 레이아웃 구조를 제공 (AppBar와 body 영역 포함 가능)

• AppBar은 상단에 표시될 툴바 설정 / 'Home Screen'으로 지정
• Center은 자식 위젯을 가운데 정렬 
  • ElevatedButton은 클릭 가능한 버튼을 생성
    • onPressed는 버튼을 클릭 시 호출되는 콜백 함수로 Navigator.push() 사용하면 DetailScreen으로 이동
    • MaterialPageRoute는 새로운 화면으로 전환시 사용하는 Flutter의 내비게이션 기능으로, DetailScreen 위젯을 생성하여 화면을 이동함

 

1.3 2개 화면 만들기 - DetailScreen 화면

1) DetailScreen 클래스

- 앱의 두 번째 화면

- StatelessWidget을 상속받아서 상태 변화가 없는 화면

- Scaffold를 반환하며, 화면 레이아웃 구성

• AppBar은 상단에 표시될 툴바 설정 / 'Detail Screen'으로 설정
• Center은 자식 위젯을 가운데 정렬 
  • ElevatedButton은 클릭 가능한 버튼을 생성
    • onPressed는 버튼을 클릭 시 호출되는 콜백 함수로 Navigator.pop()을 호출하여 이전 화면인 HomeScreen으로 돌아가도록 설정 / 즉, 이전에 쌓인 화면을 제거하고 뒤로 이동하는 역할

 

★ Flutter 앱에서 기본적인 화면 전환과 뒤로 가기 기능
Navigator.push는 새로운 화면을 쌓아 올리고,
Navigator.pop은 쌓인 화면을 제거해 이전 화면으로 돌아가는 방식

 

@override
- Dart에서 메소드 재정의를 나타냄
- 부모 클래스에서 상속받은 메소드를 자식 클래스에서 새롭게 정의하고 있다는 것을 명시
- 즉, build()는 부모 클래스인 StatelessWidget이나 StatefulWidget에 이미 정의되어 있지만, 자식 클래스(MyApp, HomeScreen, DetailScreen)에서 해당 메소드를 재정의하여 위젯의 UI를 제공할 수 있음

 

2. 내비게이션 구현하기 결과