Flutter - 텍스트 필드의 입력 값을 다음 페이지에 바로 노출시키기

 

바드에게 한 질문 

플러터로 코드를 짤 때 바로 1번 페이지의 텍스트 필드 입력값을 2번 페이지로 넘기려고 하는데 바로 리셋을 해야 데이터가 보여져 provider를 쓰고 있는데 왜 그런지 알려줘

 

바드의 답변 그리고 코드 

Provider를 사용하면 1번 페이지의 텍스트 필드 입력값을 2번 페이지로 넘길 수 있습니다. 하지만 바로 리셋을 해야 데이터가 보여지는 이유는 Provider가 값을 변경할 때마다 페이지를 다시 렌더링하기 때문입니다. 즉, 1번 페이지에서 텍스트 필드의 값을 변경하면 Provider는 값을 변경한 것을 감지하고 1번 페이지를 다시 렌더링합니다. 이때 2번 페이지는 1번 페이지의 값을 다시 가져와서 화면에 표시합니다.
하지만 1번 페이지에서 텍스트 필드의 값을 변경하지 않고 바로 2번 페이지로 이동하면 Provider는 값을 변경한 것을 감지하지 못합니다. 따라서 2번 페이지는 1번 페이지의 이전 값을 가져와서 화면에 표시합니다.
이 문제를 해결하려면 1번 페이지에서 텍스트 필드의 값을 변경한 후 2번 페이지로 이동해야 합니다. 그러면 Provider는 값을 변경한 것을 감지하고 2번 페이지를 다시 렌더링하여 변경된 값을 화면에 표시합니다.
다음은 Provider를 사용하여 1번 페이지의 텍스트 필드 입력값을 2번 페이지로 넘기는 예제입니다.

 

 

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: TextField(
          decoration: InputDecoration(
            labelText: 'Enter text',
          ),
          onChanged: (text) {
            // Change the value of the text provider.
            Provider.of<TextProvider>(context).text = text;
          },
        ),
      ),
    );
  }
}

// 2번 페이지

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text(
          '${Provider.of<TextProvider>(context).text}',
        ),
      ),
    );
  }
}

// TextProvider

class TextProvider with ChangeNotifier {
  String text;

  void setText(String text) {
    this.text = text;
    notifyListeners();
  }
}