간단 설명

• onPressed : 버튼이 눌렸을 때 실행되는 콜백 함수
  • Navigator.pushReplacement 를 호출하여 현재 화면을 새로운 화면으로 교체
• Navigator 는 Flutter에서 화면 전환을 처리하는 클래스
  • pushReplacement 메서드는 현재 화면을 대체하고 새로운 화면을 보여줌
  • 즉, PageB 를 새로 띄우면서 기존 화면은 더 이상 사용되지 않도록 대체
• 이 메서드의 첫 번째 매개변수는 context ,
  • 두 번째는 화면 전환의 경로를 설정하는 MaterialPageRoute
• MaterialPageRoute: 새로운 화면을 생성할 때 사용하는 라우트(Route)
  • builder 매개변수를 통해 전환할 페이지( PageB )를 지정
• const PageB(): PageB 라는 새로운 화면의 인스턴스를 생성
  • const는 이 인스턴스가 불변임을 나타내며, 불필요한 재빌드를 방지

ElevatedButton

• 버튼을 입체감 있게 표현하며, 일반적으로 중요 동작에 사용

TextButton

• 평면적인 버튼으로, 주로 덜 중요한 액션이나 텍스트 링크 같은 경우에 사용

IconButton

• 아이콘을 버튼으로 사용하며, 짧고 직관적인 액션에 적합

FloatingActionButton

• 화면 위에 떠 있는 둥근 버튼으로, 일반적으로 주요 작업을 나타냄

Navigator.pushReplacement 와 Navigator.push 의 차이

• 즉, Navigator.pushReplacement 는 새로운 페이지로 전환 후 이전 페이지로 돌아가지 못하게 하고 싶을 때 사용
  ex) 로그인을 한 이후에 로그인 페이지로 다시 돌아가면 안되기 때문에 이럴경우 사용

그외 꿀팁

• option + shift + enter
  • 해당 파일 쉽게 임포트
• option + enter
  • 옵션 중에 고르는 것으로 가능
• .of(context)
  • 현재위치 context로부터 위젯 트리를 거슬러 올라가면서 가장 가까운 navigator 위젯을 찾아서 반환하라. 라는 의미
• 라우트, 화면, 위젯은 모두 같은 의미
• 버튼, 모듈화전 코드, 모듈화된 라우트 코딩
  • 라이브 코딩
• 둥근 모서리
  • 라이브 코딩

위젯 트리의 흐름

1. 위젯 생성

• UI를 구성할 위젯들이 선언되고, 부모-자식 관계로 위젯 트리가 형성

2. 빌드(build)

• Flutter는 위젯 트리를 기반으로 각 위젯을 빌드하면서 build() 메서드를 호출
  • 여기서 각 위젯의 자식 위젯들을 정의하고 트리가 재구성

3. 요소 트리(Element Tree) 업데이트

• 위젯이 재구성될 때 Flutter는 요소 트리를 사용하여 기존 요소를 재사용하거나 변경 사항을 적용

4. 렌더 트리(Render Tree) 생성

• 요소 트리의 변경 사항이 렌더 트리로 전달되어 UI가 실제로 화면에 그려짐

Bulder Context

• 위젯 트리 내에서 위젯의 위치와 관련된 메타정보를 담고 있는 객체
• BuildContext
  • 위젯 트리 내에서 부모-자식 관계와 같은 상호작용을 가능하게 하며, 특정 위젯의 위치를 나타냄
  • 상위에 있는 위젯이나 데이터를 쉽게 접근할 수 있음
  • 주로 build 메서드 안에서 사용되며, 위젯 트리의 변경 사항을 반영해 위젯을 재빌드할 때마다 새로운 BuildContext 가 전달됨
  • 위젯이 새롭게 빌드되면 그와 연결된 BuildContext 는 최신 상태의 트리 정보를 가지고, 이를 통해 다른 위젯에 영향을 미칠 수 있음
  • 화면 전환이나 네비게이션에도 사용 ex) Navigator.push(context, ...) 같은 코드를 통해 context 를 전달하여 화면 간 이동 가능
• 전역 데이터 및 상태 관리
  • BuildContext 는 Provider 패턴이나 InheritedWidget 과 같은 상태 관리 방식에서도 중요
  • 이러한 방식에서 BuildContext 를 통해 특정 위젯 트리에서 데이터를 효율적으로 전달받고 처리 가능
    • ex) Provider.of(context) 와 같은 방식으로 상위 위젯 트리에서 특정 데이터를 검색할 수 있음
• Builder Context 사용 예시
  
• Builder 위젯을 이용한 성능 최적화
  • Builder를 사용하지 않으면, 부모 위젯이 변경되면 -> 해당 위젯과 연결된 모든 위젯이 리빌드
• 그러나 Builder로 감싸면 하위 트리만 독립적으로 관리되기 때문에 불필요한 위젯 빌드가 방지