將有狀態 class 的 state 的值傳遞給不同的小部件？

Question

我有一個 function：

class LoginPage extends StatefulWidget {
  static const routeName = '/auth';

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {

在class _LoginPageState extends State內部，我有一個布爾變量“已注冊”，當用戶第一次注冊時，該變量在 setState 內更改為 true。 每當它發生更改時，如何將此值傳遞給我的主 function？ 此外，這個變量也需要從不同的地方更改為 true。 基於它，我想向我的用戶顯示不同的屏幕 - 如下所示：

home: Scaffold(
    resizeToAvoidBottomInset: false,
    body: Container(
      child: registered ? OnboardingPage() : HomePage(),
    ),
  ),

你能給我看一些代碼或指導我嗎？ 謝謝你的幫助！

Answer 1

您的登錄頁面

class LoginPage extends StatefulWidget {
  LoginPage({Key key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  bool registered;
  
  // ...

  void gotoSecondPage() {
    Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => SecondPage(registered),));
  }
}

你的另一頁

class SecondPage extends StatefulWidget {
  bool registered;

  SecondPage(this.registered);

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Container(
        child: widget.registered ? OnboardingPage() : HomePage(),
      ),
    );
  }
}

Answer 2

如果此變量在_LoginPageState內更改，您可以根據其值重定向用戶，如下所示：

// BEGIN: TODO
// registered = true;
// END: TODO
Navigator.pushReplacement(
    context,
    MaterialPageRoute(builder: (context) => registered ? OnboardingPage() : HomePage()),
  );

Answer 3

您可以使用StreamBuilder和Provider的組合首先異步獲取數據，然后將該數據發送到小部件樹中的不同位置。 就像是：

final StreamController _controller = StreamController();

// Provide this _controller in your top level widget tree
return Provider<StreamController>(
    create: (context) => _controller,
    child: MaterialApp(...),
);

在您的_LoginPageState中，每當您獲得新的registered值時：

// ... other lines
var registered = async getUserRegisterStatus() // sample method

// Add the new value to Stream
Provider.of<StreamController>.add(registered);

然后，您可以使用此 controller 通知以下任何小部件值的更改：

// Sample place that needs the value
home: Scaffold(
    resizeToAvoidBottomInset: false,
    body: StreamBuilder<bool>(
       initialValue: false
       stream: Provider.of<StreamController>.stream,
       builder: (context, snapshot) {
         if (!snapshot.hasData) return Container(child: CircularProgressIndicator());
         var registered = snapshot.data;
         return Container(
            child: registered ? OnboardingPage() : HomePage(),
         );
       }
    ),
  ),