Flutter - StatefulWidget 생성자를 이용하여 페이지 간 데이터 전달하기

 

기본 구문

기본 구문으로는 내비게이터를 통해 페이지만 이동되는 기본 구조의 코드입니다.

---

페이지 연결 구문

내비게이터를 통해 클릭시 특정 페이지(ContentPage)로 이동하는 코드

// 리스트뷰 카드 클릭 이벤트
  void cardClickEvent(BuildContext context, int index) {
    dynamic content = items[index];
    Navigator.push(
      context,
      MaterialPageRoute(
        // 정의한 ContentPage의 폼 호출
        builder: (context) => ContentPage(),
      ),
    );
  }

---

연결 페이지 StatefulWidget 구문

class ContentPage extends StatefulWidget {
  const ContentPage({super.key});

  @override
  State<ContentPage> createState() => _ContentState();
}

class _ContentState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
    // 코드 생략
  }
}

---

생성자로 페이지간 데이터 전달

생성자 생성하는 방법 (StatefulWidget)

• 데이터를 전달 받을 변수 선언 
  • 데이터타입 변수명(예시 : final String var)
• 생성자 함수 호출
  • key
    • 위젯 고유의 식별자 
  • required this.content
    • required : 반드시 필요한 매개변수를 의미
    • this.varialble : 반드시 필요한 매개변수의 변수명
  • super(key)
    • 부모 클래스인 StatefulWidget의 생성자를 호출하여 초기화하기 위한 키 확인
    • key 매개변수를 전달하여 부모 클래스의 생성자 실행

  // 생성자를 통해 값을 초기화할 변수
  final dynamic content;
  // 생성자 값 초기화
  const ContentPage({Key? key, required this.content}) : super(key: key);

---

생성자의 값을 State 클래스로 넘겨주는 방법 (StatefulWidget > State)

• 키 : 밸류 형식으로 생성자의 값 전달
  • State클래스(키 : 밸류)

  @override
  State<ContentPage> createState() => _ContentState(content: content);

---

StatefulWidget 전체 코드

  class ContentPage extends StatefulWidget {
  // 생성자를 통해 값을 초기화할 변수
  final dynamic content;
  // 생성자 값 초기화
  const ContentPage({Key? key, required this.content}) : super(key: key);

  // 생성자를 통해 초기화된 값을 State 클래스로 값 전달
  @override
  State<ContentPage> createState() => _ContentState(content: content);
}

---

생성자의 값 State 클래스에서 활용하는 방법 (State<>)

• 데이터를 전달 받을 변수 선언
  • 데이터타입 변수명(예시 : final String var)
• 생성자 함수 호출
  • required this.content
    • required : 반드시 필요한 매개변수를 의미
    • this.varialble : 반드시 필요한 매개변수의 변수명

class _ContentState extends State<ContentPage> {
  // 상태를 상속 받을 페이지에서 생성자의 값을 초기화할 변수 선언
  final dynamic content;

  // 생성자 값 초기화
  _ContentState({required this.content});
  
 // 코드 작성
 
}

---

페이지 연결 시 값을 생성자에게 넘겨주는 방법

• 페이지 호출 시 괄호 안에 키 : 밸류 형식으로 입력
  • 호출할페이지(키 : 밸류)

// 내비게이터를 통한 페이지 이동
Navigator.push(
  context,
  MaterialPageRoute(
    // 정의한 ContentPage의 폼 호출
    // content 키의 content 라는 데이터 전달
    builder: (context) => ContentPage(content : content),
  ),
);

---

전체 코드

// 리스트뷰 카드 클릭 이벤트, 특정 페이지로 이동
  void cardClickEvent(BuildContext context, int index) {
    dynamic content = items[index];
    Navigator.push(
      context,
      MaterialPageRoute(
        // 정의한 ContentPage의 폼 호출
        builder: (context) => ContentPage(content : content),
      ),
    );
  }
  
  
// 특정 페이지
  class ContentPage extends StatefulWidget {
  // 생성자를 통해 값을 초기화할 변수
  final dynamic content;
  // 생성자 값 초기화
  const ContentPage({Key? key, required this.content}) : super(key: key);

  // 생성자를 통해 초기화된 값을 State 클래스로 값 전달
  @override
  State<ContentPage> createState() => _ContentState(content: content);
}


// 특정 페이지의 스태이트 클래스
class _ContentState extends State<ContentPage> {
  // 상태를 상속 받을 페이지에서 생성자의 값을 초기화할 변수 선언
  final dynamic content;

  // 생성자 값 초기화
  _ContentState({required this.content});
  
 // 코드 작성
 
}