flutter - 如何将用户的TextFormField输入传递给flutter中不同类的按钮

Question

我正在创建一个颤振应用程序。为了代码的可重用性，我需要区分电子邮件和密码表单以及登录按钮，我不确定如何正确地将输入从 textformfield 传递到按钮，以便在单击时验证表单。这是我的代码。请注意，我是颤振的初学者。

//这是我的 EmailTextForm 类：

    class EmailTextForm extends StatelessWidget {
    String email;

   EmailTextForm({Key key, this.email}) : super(key: key);

  Widget build(BuildContext context) {

return Container(
    width: 370.0,
    height: 54.0,
    child: TextFormField(
      decoration: InputDecoration(
        enabledBorder: OutlineInputBorder(
            //DEFAULT STATE OF THE BORDER(FOCUSED BORDER DOWN BELOW TO HAVE MORE CONTROL OF THE FORM)
            borderSide: BorderSide(
                width: 1.0, color: Color.fromRGBO(16, 25, 53, 0.1)),
            borderRadius: BorderRadius.circular(12.0)),
        focusedBorder: OutlineInputBorder(
          //ON FOCUSED BORDER TO NOT CHANGE STATE WHILE BEING PRESSED ON
          borderSide: BorderSide(
              width: 1.0, color: Color.fromRGBO(16, 25, 53, 0.1)),
          borderRadius: BorderRadius.circular(12.0),
        ),
        prefixIcon: Icon(Icons.mail, color: Color(0xFF9FA3AE)),
        hintText: 'El.Paštas',
        hintStyle: TextStyle(
          fontFamily: 'Sora',
          fontSize: 16.0,
          color: Color(0xFF9FA3AE),
        ),
      ),
      validator: (input) =>
          !input.contains('@') ? 'Please enter a valid email' : null,
      onSaved: (input) => email = input,
    ));
 }
}

//这是按钮类。

import 'package:flutter/material.dart';
import 'dart:math' as math;

class LoginButton extends StatelessWidget {
  final _formKey = GlobalKey<FormState>();
  String email;
  String password;

  _submit() {
    if (_formKey.currentState.validate()) {
      _formKey.currentState.save();
      print('validated');
      //logging in the user
    }
  }

  @override
  Widget build(BuildContext context) {
    //Container to manipulate button design
    return Container(
        width: 370.0,
        height: 54.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular((12.0)),
          gradient: LinearGradient(
            //change gradient, wrong value, maybe something in AdobeXD.
            colors: <Color>[Color(0xFF00BAFF), Color(0xFF448CFA)],
            stops: [0.0, 1.0],
            begin: Alignment(-1.0, 0.0),
            end: Alignment(1.0, 0.0),
            transform: GradientRotation(math.pi / 2),
          ),
          boxShadow: [
            BoxShadow(
              color: Color.fromRGBO(48, 183, 241, 1.0),
              offset: Offset(0.0, 4.0),
              blurRadius: 12.0,
            ),
          ],
        ),

        //@@@@ WHEN BUTTON IS PRESSED @@@@
        child: ElevatedButton(
          onPressed: _submit,
          child: Text(
            'Prisijungti',
          ),
          style: ElevatedButton.styleFrom(
              //COLOR OF THE TEXT INSIDE THE BUTTON
              onPrimary: Color(0xFFFFFFFF),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12.0),
              ),
              primary: Colors.transparent,
              textStyle: TextStyle(
                //Text inside button style
                fontSize: 16.0,
                fontWeight: FontWeight.w600,
                fontFamily: 'Sora',
              )),
        ));
  }
}

标签： flutterdart

Answer 1

您需要将它们包装在 Form 小部件中并传递密钥，例如：

Form(
  key: _keyForm
  child: Column(
    children: <Widget>[
     EmailTextFieldForm(),
     PasswordTextFieldForm(),
     FormButton(),
   ],
 )
)