20230905 : 오늘도 해낸 나 아주 칭찬

Today 요약

[✅] 프로그래머스 코딩테스트 lv0 1문제

[✅] flutter 강의 2개

[✅] flutter 위젯 강의 1개

[✅] dart 강의 2개

---

배운 점

1) flutter CustomTransitionPage

• 사용자 정의 전환 기능이 포함된페이지 MaterialPage 또는 CupertinoPage 대신 사용된다
• 새로운 경로로 라우팅할 때 trasitionBuilder가 CustomTransitionPage 호출되며 전환 위젯을 반환

GoRoute(
  path: '/fade',
  pageBuilder: (context, state) => CustomTransitionPage<void>(
    key: state.pageKey,
    child: const TransitionsPage(kind: 'fade', color: Colors.red),
    transitionsBuilder: (context, animation, secondaryAnimation, child) =>
        FadeTransition(opacity: animation, child: child),
  ),
),

• 사용자 정의 전환을 전혀 전환하지 않으려면 NoTransitionPage와 함께 제공되는 기능을 사용

GoRoute(
  path: '/none',
  pageBuilder: (context, state) => NoTransitionPage<void>(
    key: state.pageKey,
    child: const ExampleTransitionsScreen(
      kind: 'none',
      color: Colors.white,
    ),
  ),
),

go_router

2) flutter FadeTransition 

• 강력한 애니메이션 엔진
• Fade in / out 을 할 수 있다

final controller = AnimationController (
	vsync : this, 
    duration: Duration(seconds:2),
);
final animation = Tween (
	begin : 0.0,
    end : 1.0, 
).animate(controller);

controller.forward();

• Animation controller를 만들어 지속 시간을 설정한다
• 시작 및 종료에 불투명도를 부여한 후 애니메이션을 만든다 
• controller를 불러와  애니메이션 시작

FadeTransition class - widgets library - Dart API

3) NamedRoute 

• URL을 활용하여 route를 참조하는게 아닌 name으로  참조하는 방법
• nested 혹은 child route를 사용할 때 더 의미가 있다
• GoRoute name :
• context.pushNamed("username_screen")

4) GoRoute inner GoRoute

• 라우트 내에 라우트를 넣을 수있음 
• react native의 stack이라고 생각하면 될 거 같다!

4) flutter navigator push, pushNamed, go,차이?

• context 현재 위젯 트리에 있는 위젯과 관련된 정보를 포함하는 객체
• context를 사용하여 다른 위젯으로 이동, 앱 내 탐색을 관리

Navigate to a new screen and back

4-1 Navigator.push

• push 메서드는 현재 페이지 위에 새로운 페이지를 푸시하는 것으로 일반적으로 새로운 페이지로 이동시 사용된다

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
);

4-2 Navigator.pushNamed

• pushNamed 메서드는 이름으로 식별된 라우트를 푸시한다
• 라우트 이름과 해당 페이지가 매핑된 라우트 테이블을 사용하여 페이지간 이동시 주로 사용된다

Navigator.pushNamed(context, '/newPage');

4-3 Navigator.pop

• pop 메서드는 현재 페이지를 스택에서 제거하고 이전 페이지로 돌아가는 것
• result 매개변수를 사용하여 이전페이지로 데이터를 전달 할 수 있다

Navigator.pop(context, 'Data to be passed back');

4-4 Navigator.popUntil

• popUntil 메서드는 지정된 조전을 만족하는 페이지까지 스택에서 모든 페이지를 제거

Navigator.popUntil(context, ModalRoute.withName('/desiredRoute'));

 

---

장하다.. 오늘도 해냈따!!!!