無法在 Flutter 中將變量值從一個無狀態 Widget 傳遞到另一個

Question

謝謝你在前面的回答。 我正在嘗試將 GetTextField StatelessWidget 中的 TextField 小部件中的“用戶名、email、密碼”傳遞給 GetSignup StatelessWidget 中 GestureDetector 小部件中的打印 function。 我嘗試了兩種方法，但在填寫字段並按下按鈕后都會出現“用戶名：null，用戶 email：null，用戶密碼：null”消息。 什么可能是錯的？

方法一：

class SignupScreen extends StatefulWidget {
  static const id = "signup_screen";
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: BackgroundSignup(),
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 35,
              ),
              child: Column(
                children: <Widget>[
                  GetHeader(),
                  GetTextField(),
                  GetSignup(),
                  GetButtonRow(),
                ],
              ),
            ),
            GetBackButton(),
          ],
        ),
      ),
    );
  }
}

class GetTextField extends StatelessWidget {
  String email;
  String password;
  String username;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                username = value;
              },
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الاسم كاملا",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                email = value;
              },
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الإيميل",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                password = value;
              },
              obscureText: true,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "كلمة السر",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 25,
          ),
        ],
      ),
    );
  }
}

class GetSignup extends StatelessWidget {
  GetTextField getTextField = GetTextField();

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              print('user name: ${getTextField.username}');
              print('user email: {getTextField.email}');
              print('user password: ${getTextField.password}');
            },
            child: CircleAvatar(
              backgroundColor: Colors.grey.shade800,
              radius: 40,
              child: Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
            ),
          ),
          Text(
            "انشئ حسابك",
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}

方法二：

class SignupScreen extends StatefulWidget {
  static const id = "signup_screen";
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  GetTextField getTextField = GetTextField();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: BackgroundSignup(),
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 35,
              ),
              child: Column(
                children: <Widget>[
                  GetHeader(),
                  GetTextField(),
                  GetSignup(
                    username: getTextField.username,
                    email: getTextField.email,
                    password: getTextField.password,
                  ),
                  GetButtonRow(),
                ],
              ),
            ),
            GetBackButton(),
          ],
        ),
      ),
    );
  }
}

class GetTextField extends StatelessWidget {
  String email;
  String password;
  String username;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                username = value;
              },
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الاسم كاملا",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                email = value;
              },
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الإيميل",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                password = value;
              },
              obscureText: true,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "كلمة السر",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 25,
          ),
        ],
      ),
    );
  }
}

class GetSignup extends StatelessWidget {
  final username;
  final email;
  final password;
  GetSignup({this.username, this.email, this.password});
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              print('user name: $username');
              print('user email: $email');
              print('user password: $password');
            },
            child: CircleAvatar(
              backgroundColor: Colors.grey.shade800,
              radius: 40,
              child: Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
            ),
          ),
          Text(
            "انشئ حسابك",
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

像這樣更新您的 GetTextField class：

class GetTextField extends StatelessWidget {
  Function(String) onEmail;
  Function(String) onPassword;
  Function(String) onUsername;
  GetTextField({Key key, this.onEmail,this.onPassword,this.onUsername}) : super(key: key);
   @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onUsername,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الاسم كاملا",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onEmail
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الإيميل",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onPassword
              obscureText: true,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "كلمة السر",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 25,
          ),
        ],
      ),
    );
}

像這樣在 SignupScreen 中使用它：->

class SignupScreen extends StatefulWidget {
  static const id = "signup_screen";
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  String email="",username="",password="";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: BackgroundSignup(),
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 35,
              ),
              child: Column(
                children: <Widget>[
                  GetHeader(),
                  GetTextField(
                     onEmail(email){
                       setState(() {
                          email = email;
                        });
                     },
                     onUsername(username){
                       setState(() {
                          username = username;
                        });
                     }
                     onPassword(pass){
                       setState(() {
                          password = pass;
                        });
                     }
                  ),
                  GetSignup(
                    username: username,
                    email: email,
                    password: password,
                  ),
                  GetButtonRow(),
                ],
              ),
            ),
            GetBackButton(),
          ],
        ),
      ),
    );
  }
}

Answer 2

First: I tried to implement Shikhar Singh instruction but I get the same output "username= null, email = null, password = null" here is the code after modification"

class SignupScreen extends StatefulWidget {
  static const id = "signup_screen";
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  String email;
  String username;
  String password;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: BackgroundSignup(),
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 35,
              ),
              child: Column(
                children: <Widget>[
                  GetHeader(),
                  GetTextField(
                    onEmail: (value) {
                      setState(() {
                        value = email;
                      });
                    },
                    onUsername: (value) {
                      setState(() {
                        value = username;
                      });
                    },
                    onPassword: (value) {
                      setState(() {
                        value = password;
                      });
                    },
                  ),
                  GetSignup(
                    username: username,
                    email: email,
                    password: password,
                  ),
                  GetButtonRow(),
                ],
              ),
            ),
            GetBackButton(),
          ],
        ),
      ),
    );
  }
}

class GetTextField extends StatelessWidget {
  Function(String) onEmail;
  Function(String) onPassword;
  Function(String) onUsername;
  GetTextField({Key key, this.onEmail, this.onPassword, this.onUsername})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onUsername,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الاسم كاملا",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onEmail,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الإيميل",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onPassword,
              obscureText: true,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "كلمة السر",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 25,
          ),
        ],
      ),
    );
  }
}

class GetSignup extends StatelessWidget {
  final username;
  final email;
  final password;
  GetSignup({Key key, this.username, this.email, this.password})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              //TODO: fill circle avatar
              print('user name: $username');
              print('user email: $email');
              print('user password: $password');
            },
            child: CircleAvatar(
              backgroundColor: Colors.grey.shade800,
              radius: 40,
              child: Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
            ),
          ),
          Text(
            "انشئ حسابك",
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}