플러터의 기본적인 동작이나 UI선언등을 공부하느라 포스팅이 늦어졌다.

화면 전환

일단 이전 포스팅에서는 Led Board를 구현하기로 했는데 그 전에 화면 전환을 하는 법 부터 알고 넘어가야할 것 같았다.

원본 코드

https://hanab.kr/flutter-%ED%99%94%EB%A9%B4-%EC%A0%84%ED%99%98-%EB%B0%A9%EB%B2%95-navigator%EC%99%80-pageroutebuilder-%EB%B9%84%EA%B5%90/

해당 블로그 내용을 공부했다.

Navigator와 PageRouteBuilder

Navigator

장점: Navigator는 화면 전환을 관리하는 데 필요한 기본적인 메서드를 제공공한다. push, pop 등의 메서드를 통해 화면 스택을 관리할 수 있습니다. 이는 앱 내에서 화면 전환을 쉽게 구현할 수 있게 해준다.

사용 상황: Navigator는 기본적인 화면 전환을 구현할 때 사용된다.. 예를 들어, 버튼을 눌렀을 때 새로운 화면으로 이동하거나, 뒤로 가기 버튼을 눌렀을 때 이전 화면으로 돌아가는 등의 기능을 구현하는 등 소규모 앱에 사용된다.

PageRouteBuilder

장점: PageRouteBuilder는 화면 전환에 애니메이션을 적용할 수 있게 해준다. pageBuilder와 transitionsBuilder를 통해 화면과 전환 효과를 자유롭게 정의할 수 있으며 이를 통해 사용자 경험을 향상시킬 수 있다.

사용 상황: PageRouteBuilder는 화면 전환에 애니메이션을 적용하고 싶을 때 사용됩니다. 예를 들어, 화면이 슬라이드하면서 나타나거나, 페이드인 효과를 적용하고 싶을 때 사용할 수 있습니다.

둘의 차이점

Navigator는 기본적인 화면 전환을 제공하고, PageRouteBuilder는 화면 전환에 애니메이션을 적용할 수 있게 해준다.

코드 분석

FirstScreen

// <main.dart>
import 'package:flutter/material.dart';
//	두 번째 화면을 정의하는 SecondScreen클래스를 포함하고 있다.
import 'second_screen.dart'; 

void main() { // 앱의 시작점 main
  runApp(MaterialApp( // Material Design의 앱을 실행하며
    title: 'Navigator', 
    home: FirstScreen(), // 처음 화면이 FirstScreen()임을 명시한다.
  ));
}

// StatelessWidget을 확장하는 FirstScreen 클래스다.
class FirstScreen extends StatelessWidget {
  @override
  // build메서드는 위젯의 일부분을 그리는데 사용되며
  // 이 메서드는 BuildContext를 인자로 받아 화면에 그려질 위젯을 반환한다.
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        //  ElevatedButton 생성하며 해당 버튼은 물리적인 높이 효과를 가진다.
        child: ElevatedButton(
          child: Text('Go to next Screen'),
          onPressed: () {
          	//	Navigator.push를 사용하여 SecondScreen으로의 화면 전환을 수행한다.
            Navigator.push (
              // 현재의 BuildContext를 전달한다.
              context, 
              //  라우트를 생성하여 SecondScreen을 로드한다.
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

각 코드의 설명은 주석으로 달아놓았다.

SecondScreen

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      // body를 Center로 정렬하여 가운데에 배치하고
      body: Center (
      // child를 column으로 정렬하여 children을 세로로 배치한다.
        child: Column( 
        // column의 주 축을 중앙으로 설정한다.
          mainAxisAlignment : MainAxisAlignment.center,
          children: <Widget>[
            Text('This page is Second Screen'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
              //navigator.pop을 통해 이전 화면으로 돌아간다.
                Navigator.pop(context);
              },
              child: Text('back to first screen'),
              ),
          ],
        ),
      ),
    );
  }
}

일단 해당 코드를 보면 Navigation.push, Navigation.pop을 사용하여 화면을 전환한다.

그런데 여기서 context라는게 보이는데 context가 무엇일까

Context

일단 처음 class를 생성할 때

Widget build(BuildContext context)

부터 context가 보인다.

Flutter에서 BuildContext는 위젯 트리에서 위젯의 위치를 나타내는 핸들이다.
이는 위젯의 부모와 자식에 대한 정보를 포함하며, 위젯의 속성에 접근하는데 사용된다.

BuildContext는 build 메서드의 인자로 전달되며, 이를 통해 위젯은 자신이 어디에 위치해 있는지, 어떤 데이터에 접근할 수 있는지 알 수 있다.

그럼 Navigator를 사용할 때 BuildContext가 필요한 이유는 무엇일까?

Navigator메서드 들이 현제 위젯 트리에서 어떤 Navigator를 사용해야 하는지 알아야 하기 때문이다.
BuildContext를 통해 navigator는 올바른 위젯 트리 위치에서 사용할 수 있다.

끝!