Flutter passing data via Function across Widget

강정우·2023년 5월 15일
0

Flutter&Dart

목록 보기
19/87
post-thumbnail
  • 만약 당신이 하위 요소에서 받은 값을 부모요소에서 배열로 저장야한다고 가정하자.
    그러기위해서는 다음과 같은 일련에 동작을 따라야한다.

1. class에 variable 생성

class _QuizState extends State<Quiz> {
  final List<String> selectedAnwers = [];
  
  void chooseAnswer(String answer) {
    selectedAnwers.add(answer);
  }
  ...
  • 위 코드처럼 List에 계속하여 새로운 메모리를 생성하고 싶지 않기 때문에 한 배열을 만들고 거기에 final 키워드를 넣어서 새로운 메모리를 계쏙하여 생성하지 않도록 하였다.

  • 단, 나중에 해당 variable를 초기화(빈 배열을 재할당) 할 일이 있다면 final을 사용할 수 없다.

2. 함수 선언

  • vue.js에서의 emit과 react에서의 on어쩌구함수 처럼 생성자로 내릴 함수를 선언해준다.
  • 이떄 dart에서는 push 대신 add를 사용하기 숙지하자.

3. 생성자 함수로 내리기

class _QuizState extends State<Quiz> {
  final List<String> selectedAnwers = [];
  
  ...
  
  
    Widget build(context) {
      Widget screenWidget = StartScreen(swichScreen);
      if (activeScreen == 'questions-screen') {
        screenWidget = QuestionsScreen(onSelectAnswer: chooseAnswer);
      }
      
  ...    
  • 이때 QuestionScreen이라는 Widget에 naming parameter로 내려준다.

  • 이때 react와 같이 on 이라는 접두어가 붙으면 좋다. conventional하고 일관성이 있기 때문이다.

4. 해당 Widget에서 사용하기

class QuestionsScreen extends StatefulWidget {
  const QuestionsScreen({super.key, required this.onSelectAnswer});

  final void Function(String answer) onSelectAnswer;

  
  State<QuestionsScreen> createState() {
    return _QuestionsScreenState();
  }
}
  • 물론 StatefullWidget에서는 바로 사용이 불가능하기 때문에 Widget이 한 번 걸러줘야한다.

  • 파라미터로 넘겨받은 함수를 변수로서 선언해 놓으면 밑에 State 클래스에서 widget이라는 객체로 받아서 사용할 수 있다.

5. State 클래스에서 사용하기 (widget 속성값)

class _QuestionsScreenState extends State<QuestionsScreen> {
  var currentQuestionIndex = 0;

  void answerQuestion(String selectedAnswer) {
    widget.onSelectAnswer(selectedAnswer);
    setState(() {
      currentQuestionIndex++;
    });
  }

  
  Widget build(context) {
    var currentQuestion = questions[currentQuestionIndex];

    return SizedBox(
    
      ...
      
            ...currentQuestion.getShuffledAnswers().map((answer) {
              return AnswerButton(
                answerText: answer,
                onTap: () {
                  answerQuestion(answer);
                },
              );
            })
          ],
        ),
      ),
    );
  }
}
  • 만약 이제 매개변수를 받을 일이 생긴다면 pointing에서 익명함수로 변환시킨 다음 함수 body에서 실행해줘야한다.

  • widget property는 이 State 클래스에서만 사용할 수 있다.

  • 이 widget property Widget 클래스와 그 속성에 접근할 수 있다.

profile
智(지)! 德(덕)! 體(체)!

0개의 댓글