繁体   English   中英

"如何修复我的代码并让登录屏幕页面上的所有登录按钮正常工作"

[英]How can i fix my code and let all the login button on the login screen page work

我有这个代码是我的我一直在尝试让所有主页登录屏幕按钮工作但由于错误我什至注册和忘记密码按钮都无法正常工作希望有人可以帮助我修复我的代码让它工作,让我在按下登录时将我带到一个空白页面,我可以插入一个抽屉和 const。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Marketing',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: SinginPage(key: UniqueKey()),
    );
  }
}

class SinginPage extends StatefulWidget {
  const SinginPage({required Key key}) : super(key: key);
  @override
  _SinginPageState createState() => _SinginPageState();
}

class _SinginPageState extends State<SinginPage> {
  bool obscureText = false;

  final TextEditingController _email = TextEditingController();
  final TextEditingController _password = TextEditingController();

  final emailGlobalKey = GlobalKey<FormState>();
  final passwordGlobalKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    var currentWidth = MediaQuery.of(context).size.width;
    var small = currentWidth > 1201;
    var extraSmall = currentWidth > 1025;

    return Scaffold(
      backgroundColor: Colors.white,
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: extraSmall ? MediaQuery.of(context).size.height : 0.0,
            width: small
                ? MediaQuery.of(context).size.width * 0.72
                : extraSmall
                ? MediaQuery.of(context).size.width - 500
                : 0.0,
            color: Colors.indigo[200],
            child: Image.network(
              'https://5.imimg.com/data5/GQ/FP/MY-26802338/online-shopping-system-500x500.jpg',
              fit: BoxFit.cover,
            ),
          ),
          Stack(
            alignment: Alignment.topRight,
            children: [
              Container(
                height: MediaQuery.of(context).size.height,
                width: small ? MediaQuery.of(context).size.width * 0.28 : 500,
                alignment: Alignment.center,
                color: Colors.white,
                child: Container(
                  padding: const EdgeInsets.all(60.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const SizedBox(height: 45.0),
                      Container(
                        alignment: Alignment.topLeft,
                        child: const Text(
                          'WELCOME TO OUR MARKETING APP',
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: 40.0,
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                      const SizedBox(height: 65.0),
                      Container(
                        alignment: Alignment.topLeft,
                        child: const Text('Email'),
                      ),
                      Form(
                        key: emailGlobalKey,
                        child: TextFormField(
                          onChanged: (value) {
                            setState(() {
                              _email.text = value;
                            });
                          },
                          decoration: const InputDecoration(
                            prefixIcon: Padding(
                              padding:
                              EdgeInsets.only(right: 20.0, bottom: 1.0),
                              child: Icon(Icons.email_outlined,
                                  color: Colors.black45, size: 24.0),
                            ),
                            contentPadding: EdgeInsets.only(top: 15.0, left: 0),
                            hintStyle: TextStyle(
                                fontWeight: FontWeight.normal,
                                color: Colors.grey),
                            hintText: 'Email',
                            focusedBorder: UnderlineInputBorder(
                              borderSide:
                              BorderSide(color: Colors.indigo, width: 2.0),
                            ),
                          ),
                          // validator: Validators.required('Email is required!'),
                        ),
                      ),
                      const SizedBox(height: 25.0),
                      Container(
                        alignment: Alignment.topLeft,
                        child: const Text('Password'),
                      ),
                      Form(
                        key: passwordGlobalKey,
                        child: TextFormField(
                          obscureText: obscureText,
                          onChanged: (value) {
                            setState(() {
                              _password.text = value;
                            });
                          },
                          decoration: InputDecoration(
                            suffixIcon: obscureText
                                ? InkWell(
                              onTap: () {
                                setState(() {
                                  obscureText = false;
                                });
                              },
                              child: const Icon(Ionicons.eye,
                                  color: Colors.black54, size: 25.0),
                            )
                                : InkWell(
                              onTap: () {
                                setState(() {
                                  obscureText = true;
                                });
                              },
                              child: const Icon(Ionicons.eye_off,
                                  color: Colors.black54, size: 25.0),
                            ),
                            prefixIcon: const Padding(
                              padding:
                              EdgeInsets.only(right: 20.0, bottom: 1.0),
                              child: Icon(Icons.lock_outline,
                                  color: Colors.black45, size: 25.0),
                            ),
                            contentPadding:
                            const EdgeInsets.only(top: 15.0, left: 0),
                            hintStyle: const TextStyle(
                                fontWeight: FontWeight.normal,
                                color: Colors.grey),
                            hintText: 'Password',
                            focusedBorder: const UnderlineInputBorder(
                              borderSide:
                              BorderSide(color: Colors.indigo, width: 2.0),
                            ),
                          ),
                          // validator:
                          //     Validators.required('Password is required!'),
                        ),
                      ),
                      const SizedBox(height: 10.0),
                      Container(
                          alignment: Alignment.topRight,
                          child: TextButton(
                            style: TextButton.styleFrom(
                                padding: const EdgeInsets.all(0.0)),
                            onPressed: () {},
                            child: const Text('Forgot Password'),
                          )),
                      const SizedBox(
                        height: 50.0,
                      ),
                      SizedBox(
                        height: 45.0,
                        width: MediaQuery.of(context).size.width,
                        child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                              primary: _password.text != ''
                                  ? _password.text != ''
                                  ? Colors.indigo
                                  : Colors.indigo[300]
                                  : Colors.indigo[300],
                              elevation: 0.0,
                              shadowColor: Colors.transparent,
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(50.0)),
                              padding: const EdgeInsets.only(
                                  left: 30.0,
                                  top: 0.0,
                                  right: 30.0,
                                  bottom: 0.0)),
                          onPressed: () {
                            emailGlobalKey.currentState?.validate();
                            passwordGlobalKey.currentState?.validate();
                          },
                          child: const Text('LOGIN',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold)),
                        ),
                      ),
                      Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 30.0, vertical: 30.0),
                        child: const Text('OR'),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          InkWell(
                            onTap: () {},
                            child: Padding(
                              padding: const EdgeInsets.only(right: 8.0),
                              child: Material(
                                color: Colors.indigo,
                                borderRadius: BorderRadius.circular(50.0),
                                child: const Padding(
                                  padding: EdgeInsets.all(10.0),
                                  child: Icon(
                                    Ionicons.logo_facebook,
                                    color: Colors.white,
                                    size: 30.0,
                                  ),
                                ),
                              ),
                            ),
                          ),
                          InkWell(
                            onTap: () {},
                            child: Padding(
                              padding:
                              const EdgeInsets.only(left: 8.0, right: 8.0),
                              child: Material(
                                  color: Colors.red,
                                  borderRadius: BorderRadius.circular(50.0),
                                  child: const Padding(
                                    padding: EdgeInsets.all(10.0),
                                    child: Icon(
                                      Ionicons.logo_google,
                                      color: Colors.white,
                                      size: 30.0,
                                    ),
                                  )),
                            ),
                          ),
                          InkWell(
                            onTap: () {},
                            child: Padding(
                              padding: const EdgeInsets.only(left: 8.0),
                              child: Material(
                                color: Colors.blue,
                                borderRadius: BorderRadius.circular(50.0),
                                child: const Padding(
                                  padding: EdgeInsets.all(10.0),
                                  child: Icon(
                                    Ionicons.logo_twitter,
                                    color: Colors.white,
                                    size: 30.0,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Text("I don't have an account?"),
                          TextButton(
                            onPressed: () {},
                            child: const Text(
                              "Sign up",
                              style: TextStyle(color: Colors.blue),
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                padding: const EdgeInsets.only(top: 30.0, right: 50),
                child: Icon(
                  Ionicons.settings_outline,
                  color: Colors.black12.withOpacity(0.03),
                  size: 80.0,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

您的按钮正在工作,但您的 onTap 功能是空的,因此,您的按钮在被点击时什么也不做。

我在你的代码中添加了一些东西

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

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Marketing',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(primarySwatch: Colors.blue),
  home: SinginPage(),
);
}
}

class SinginPage extends StatefulWidget {
const SinginPage({
Key? key,
}) : super(key: key);

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

class _SinginPageState extends State<SinginPage> {
bool obscureText = false;

final TextEditingController _email = TextEditingController();
final TextEditingController _password = TextEditingController();

final loginGlobalKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
var currentWidth = MediaQuery.of(context).size.width;
var small = currentWidth > 1201;
var extraSmall = currentWidth > 1025;

return Scaffold(
  backgroundColor: Colors.white,
  body: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: extraSmall ? MediaQuery.of(context).size.height : 0.0,
            width: small
                ? MediaQuery.of(context).size.width * 0.72
                : extraSmall
                    ? MediaQuery.of(context).size.width - 500
                    : 0.0,
            color: Colors.indigo[200],
            child: Image.network(
              'https://5.imimg.com/data5/GQ/FP/MY-26802338/online-shopping-system-500x500.jpg',
              fit: BoxFit.cover,
            ),
          ),
          Stack(
            alignment: Alignment.topRight,
            children: [
              Container(
                height: MediaQuery.of(context).size.height,
                width:
                    small ? MediaQuery.of(context).size.width * 0.28 : 500,
                alignment: Alignment.center,
                color: Colors.white,
                child: Container(
                  padding: const EdgeInsets.all(60.0),
                  child: Form(
                    key: loginGlobalKey,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const SizedBox(height: 45.0),
                        Container(
                          alignment: Alignment.topLeft,
                          child: const Text(
                            'WELCOME TO OUR MARKETING APP',
                            style: TextStyle(
                                color: Colors.black,
                                fontSize: 40.0,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                        const SizedBox(height: 65.0),
                        Container(
                          alignment: Alignment.topLeft,
                          child: const Text('Email'),
                        ),
                        TextFormField(
                          onChanged: (value) {
                            setState(() {
                              _email.text = value;
                            });
                          },
                          decoration: const InputDecoration(
                            prefixIcon: Padding(
                              padding:
                                  EdgeInsets.only(right: 20.0, bottom: 1.0),
                              child: Icon(Icons.email_outlined,
                                  color: Colors.black45, size: 24.0),
                            ),
                            contentPadding:
                                EdgeInsets.only(top: 15.0, left: 0),
                            hintStyle: TextStyle(
                                fontWeight: FontWeight.normal,
                                color: Colors.grey),
                            hintText: 'Email',
                            focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(
                                  color: Colors.indigo, width: 2.0),
                            ),
                          ),
                          // validator: Validators.required('Email is required!'),
                        ),
                        const SizedBox(height: 25.0),
                        Container(
                          alignment: Alignment.topLeft,
                          child: const Text('Password'),
                        ),
                        TextFormField(
                          obscureText: obscureText,
                          onChanged: (value) {
                            setState(() {
                              _password.text = value;
                            });
                          },
                          decoration: InputDecoration(
                            suffixIcon: obscureText
                                ? InkWell(
                                    onTap: () {
                                      setState(() {
                                        obscureText = false;
                                      });
                                    },
                                    child: const Icon(Icons.remove_red_eye,
                                        color: Colors.black54, size: 25.0),
                                  )
                                : InkWell(
                                    onTap: () {
                                      setState(() {
                                        obscureText = true;
                                      });
                                    },
                                    child: const Icon(
                                        Icons.remove_red_eye_sharp,
                                        color: Colors.black54,
                                        size: 25.0),
                                  ),
                            prefixIcon: const Padding(
                              padding:
                                  EdgeInsets.only(right: 20.0, bottom: 1.0),
                              child: Icon(Icons.lock_outline,
                                  color: Colors.black45, size: 25.0),
                            ),
                            contentPadding:
                                const EdgeInsets.only(top: 15.0, left: 0),
                            hintStyle: const TextStyle(
                                fontWeight: FontWeight.normal,
                                color: Colors.grey),
                            hintText: 'Password',
                            focusedBorder: const UnderlineInputBorder(
                              borderSide: BorderSide(
                                  color: Colors.indigo, width: 2.0),
                            ),
                          ),
                          // validator:
                          //     Validators.required('Password is required!'),
                        ),
                        const SizedBox(height: 10.0),
                        Container(
                            alignment: Alignment.topRight,
                            child: TextButton(
                              style: TextButton.styleFrom(
                                  padding: const EdgeInsets.all(0.0)),
                              onPressed: () {},
                              child: const Text('Forgot Password'),
                            )),
                        const SizedBox(
                          height: 50.0,
                        ),
                        SizedBox(
                          height: 45.0,
                          width: MediaQuery.of(context).size.width,
                          child: ElevatedButton(
                            style: ElevatedButton.styleFrom(
                                primary: _password.text != ''
                                    ? _password.text != ''
                                        ? Colors.indigo
                                        : Colors.indigo[300]
                                    : Colors.indigo[300],
                                elevation: 0.0,
                                shadowColor: Colors.transparent,
                                shape: RoundedRectangleBorder(
                                    borderRadius:
                                        BorderRadius.circular(50.0)),
                                padding: const EdgeInsets.only(
                                    left: 30.0,
                                    top: 0.0,
                                    right: 30.0,
                                    bottom: 0.0)),
                            onPressed: () {
                              if (loginGlobalKey.currentState?.validate() ==
                                  true) {
                                print('LOGIN');
                                Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) {
                                      return Scaffold(
                                        appBar: AppBar(
                                          title: Text('After Login'),
                                        ),
                                        body: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: const [
                                            Center(
                                              child: Text('After Login'),
                                            ),
                                          ],
                                        ),
                                      );
                                    },
                                  ),
                                );
                              }
                            },
                            child: const Text('LOGIN',
                                style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold)),
                          ),
                        ),
                        Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 30.0, vertical: 30.0),
                          child: const Text('OR'),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            InkWell(
                              onTap: () {},
                              child: Padding(
                                padding: const EdgeInsets.only(right: 8.0),
                                child: Material(
                                  color: Colors.indigo,
                                  borderRadius: BorderRadius.circular(50.0),
                                  child: const Padding(
                                    padding: EdgeInsets.all(10.0),
                                    child: Icon(
                                      Icons.facebook,
                                      color: Colors.white,
                                      size: 30.0,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            InkWell(
                              onTap: () {},
                              child: Padding(
                                padding: const EdgeInsets.only(
                                    left: 8.0, right: 8.0),
                                child: Material(
                                    color: Colors.red,
                                    borderRadius:
                                        BorderRadius.circular(50.0),
                                    child: const Padding(
                                      padding: EdgeInsets.all(10.0),
                                      child: Icon(
                                        Icons.facebook_outlined,
                                        color: Colors.white,
                                        size: 30.0,
                                      ),
                                    )),
                              ),
                            ),
                            InkWell(
                              onTap: () {},
                              child: Padding(
                                padding: const EdgeInsets.only(left: 8.0),
                                child: Material(
                                  color: Colors.blue,
                                  borderRadius: BorderRadius.circular(50.0),
                                  child: const Padding(
                                    padding: EdgeInsets.all(10.0),
                                    child: Icon(
                                      Icons.facebook_outlined,
                                      color: Colors.white,
                                      size: 30.0,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            const Text("I don't have an account?"),
                            TextButton(
                              onPressed: () {
                                print('Sign Up');
                              },
                              child: const Text(
                                "Sign up",
                                style: TextStyle(color: Colors.blue),
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Container(
                padding: const EdgeInsets.only(top: 30.0, right: 50),
                child: Icon(
                  Icons.settings_outlined,
                  color: Colors.black12.withOpacity(0.03),
                  size: 80.0,
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),
);
}
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM