简体   繁体   English

如何在 flutter 的注册/注册页面中包含重要功能

[英]How to include important features to a sign up/register page with flutter

I want to include some major changes to the sign up page of my project but I'm afraid that if I create new classes and functions, I might disrupt what I already have.我想对我的项目的注册页面进行一些重大更改,但我担心如果我创建新的类和函数,我可能会破坏我已经拥有的东西。 This is what I have: enter image description here这就是我所拥有的:在此处输入图像描述

notice the text field design and this: enter image description here I included a page view into a container for the email, password and confirm password text fields and used a smooth page indicator so that it scrolls when you go to a new page enter image description here enter image description here注意文本字段的设计和这个:在此处输入图像描述我在 email、密码和确认密码文本字段的容器中包含了一个页面视图,并使用了平滑的页面指示器,以便当您将 go 滚动到新页面时它会滚动输入图像描述在此处输入图像描述

  1. I used a container to design my button and wrapped it in a gesture detector.我使用一个容器来设计我的按钮并将其包装在一个手势检测器中。 I want to connect the button to the page view and the smooth page indicator so that when the button is pressed, it moves to the next page.我想将按钮连接到页面视图和平滑页面指示器,以便在按下按钮时移动到下一页。 I also want to disable the swiping and only let the button be the one to go to the next page.我还想禁用刷卡,只让按钮成为 go 到下一页的按钮。
  2. I also want to make the button inactive unless a valid email or password is filled on each page.我还想让按钮处于非活动状态,除非每个页面上都填写了有效的 email 或密码。 The button shouldn't be clickable unless the field on that page is filled properly除非正确填写该页面上的字段,否则该按钮不应是可点击的
  3. I also want there to be inactivity if the password and confirm password textfields don't match.如果密码和确认密码文本字段不匹配,我也希望处于不活动状态。 Right now the button won't be active unless they match but I want the button edited differently when they don't match and I want a warning message under the textfield现在,除非它们匹配,否则按钮将不会处于活动状态,但我希望在它们不匹配时以不同方式编辑按钮,并且我希望在文本字段下显示警告消息

the warning message: enter image description here警告消息:在此处输入图像描述

the inactive button: enter image description here非活动按钮:在此处输入图像描述

this is the code I have currently right now the continue button is going to carry out a sign in method i created but i want it to be a continue button and change on the last page to a sign up button这是我目前拥有的代码,继续按钮将执行我创建的登录方法,但我希望它成为继续按钮并在最后一页更改为注册按钮

import 'dart:ffi';

import 'package:custigrow/Utilities/register_scroll.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:email_validator/email_validator.dart';

class Register extends StatefulWidget {
  final VoidCallback showLogInPage;
  const Register({
    Key? key,
    required this.showLogInPage,
  }) : super(key: key);

  @override
  State<Register> createState() => _RegisterState();
}

class _RegisterState extends State<Register> {
  bool _isObscure = true;
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();

  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  late String _email, _password;
  bool value = false;
  final _controller = PageController();

  Future signUp() async {
    if (passwordConfirmed()) {
      FirebaseAuth.instance.createUserWithEmailAndPassword(
          email: _emailController.text.trim(),
          password: _passwordController.text.trim());
    } else {}
  }

  bool passwordConfirmed() {
    if (_passwordController.text.trim() ==
        _confirmPasswordController.text.trim()) {
      return true;
    } else {
      return false;
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  height: 10,
                ),

                Row(
                  children: [
                    Image.asset(
                      "lib/assets/cancel.png",
                      height: 15,
                      color: Colors.green,
                    ),
                    Expanded(
                        child: Center(
                            child: Text(
                      "Sign Up",
                      style: TextStyle(fontSize: 25),
                    ))),
                  ],
                ),

                SizedBox(
                  height: 30,
                ),

                //information

                Column(
                  children: [
                    Text(
                      "Set up your account and manage your",
                      style: TextStyle(fontSize: 21.2, color: Colors.green),
                    ),
                    Text(
                      "inventory with ease",
                      style: TextStyle(fontSize: 21.2, color: Colors.green),
                    ),
                  ],
                ),

                SizedBox(
                  height: 40,
                ),

                Container(
                  height: 300,
                  child:
                      //page view for sign up
                      PageView(
                    controller: _controller,
                    scrollDirection: Axis.horizontal,
                    children: [
                      //enter email page

                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 5),
                        child: Container(
                          child: Column(
                            children: [
                              Text(
                                "Let's start with your email",
                                style: TextStyle(
                                  fontSize: 23,
                                ),
                              ),
                              SizedBox(
                                height: 45,
                              ),
                              TextField(
                                controller: _emailController,
                                obscureText: false,
                                maxLines: null,
                                keyboardType: TextInputType.emailAddress,
                                decoration: InputDecoration(
                                  border: const OutlineInputBorder(),
                                  labelText: "Email Address",
                                  labelStyle: TextStyle(
                                      fontSize: 20, color: Colors.grey),
                                  floatingLabelStyle: TextStyle(
                                      color: Colors.black, fontSize: 20),
                                  hintText: "Email Address",
                                  hintStyle: TextStyle(fontSize: 0.5),
                                  isDense: true,
                                  enabledBorder: OutlineInputBorder(
                                    borderSide: const BorderSide(
                                        width: 2.0, color: Colors.grey),
                                    borderRadius: BorderRadius.circular(7),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                      borderSide: const BorderSide(
                                          color: Colors.green, width: 2.0),
                                      borderRadius: BorderRadius.circular(7)),
                                ),
                                onChanged: (value) {},
                              ),
                            ],
                          ),
                        ),
                      ),

                      //enter password page
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 5),
                        child: Container(
                          child: Column(
                            children: [
                              Text(
                                "Create a password to secure your account",
                                style: TextStyle(
                                  fontSize: 23,
                                ),
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              TextField(
                                controller: _passwordController,
                                obscureText: _isObscure,

                                // keyboardType: TextInputType.emailAddress,
                                decoration: InputDecoration(
                                    border: const OutlineInputBorder(),
                                    labelText: "Password",
                                    labelStyle: TextStyle(
                                        fontSize: 20, color: Colors.grey),
                                    floatingLabelStyle: TextStyle(
                                        color: Colors.black, fontSize: 20),
                                    hintText: "Password",
                                    hintStyle: TextStyle(fontSize: 0.5),
                                    isDense: true,
                                    enabledBorder: OutlineInputBorder(
                                      borderSide: const BorderSide(
                                          width: 2.0, color: Colors.grey),
                                      borderRadius: BorderRadius.circular(7),
                                    ),
                                    focusedBorder: OutlineInputBorder(
                                        borderSide: const BorderSide(
                                            color: Colors.green, width: 2.0),
                                        borderRadius: BorderRadius.circular(7)),
                                    suffixIcon: IconButton(
                                        icon: Icon(
                                          _isObscure
                                              ? Icons.visibility_off
                                              : Icons.visibility,
                                          color: Colors.green,
                                        ),
                                        onPressed: () {
                                          setState(() {
                                            _isObscure = !_isObscure;
                                          });
                                        })),
                                onChanged: (value) {},
                              ),
                            ],
                          ),
                        ),
                      ),

                      //confirm pasword page

                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 5),
                        child: Container(
                          child: Column(
                            children: [
                              Text(
                                "Confirm your password",
                                style: TextStyle(
                                  fontSize: 23,
                                ),
                              ),
                              SizedBox(
                                height: 45,
                              ),
                              TextField(
                                controller: _confirmPasswordController,
                                obscureText: _isObscure,

                                // keyboardType: TextInputType.emailAddress,
                                decoration: InputDecoration(
                                    border: const OutlineInputBorder(),
                                    labelText: "Confirm Password",
                                    labelStyle: TextStyle(
                                        fontSize: 20, color: Colors.grey),
                                    floatingLabelStyle: TextStyle(
                                        color: Colors.black, fontSize: 20),
                                    hintText: "Password",
                                    hintStyle: TextStyle(fontSize: 0.5),
                                    isDense: true,
                                    enabledBorder: OutlineInputBorder(
                                      borderSide: const BorderSide(
                                          width: 2.0, color: Colors.grey),
                                      borderRadius: BorderRadius.circular(7),
                                    ),
                                    focusedBorder: OutlineInputBorder(
                                        borderSide: const BorderSide(
                                            color: Colors.green, width: 2.0),
                                        borderRadius: BorderRadius.circular(7)),
                                    suffixIcon: IconButton(
                                        icon: Icon(
                                          _isObscure
                                              ? Icons.visibility_off
                                              : Icons.visibility,
                                          color: Colors.green,
                                        ),
                                        onPressed: () {
                                          setState(() {
                                            _isObscure = !_isObscure;
                                          });
                                        })),
                                onChanged: (value) {},
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

                Center(
                  child: SmoothPageIndicator(
                    controller: _controller,
                    count: 3,
                    effect: ExpandingDotsEffect(activeDotColor: Colors.green),
                  ),
                ),

                SizedBox(
                  height: 20,
                ),

                //continue button

                GestureDetector(
                  onTap: signUp,
                  child: Container(
                    child: Center(
                      child: Padding(
                        padding: const EdgeInsets.all(20),
                        child: Text(
                          "Continue",
                          style: TextStyle(fontSize: 19, color: Colors.white),
                        ),
                      ),
                    ),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        color: Colors.green),
                  ),
                ),

                SizedBox(
                  height: 30,
                ),

                //Already have an account? Sign in
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      "Already have an account?",
                      style: TextStyle(fontSize: 15),
                    ),
                    GestureDetector(
                      onTap: widget.showLogInPage,
                      child: Text(
                        " Sign in",
                        style: TextStyle(color: Colors.green, fontSize: 16),
                      ),
                    )
                  ],
                ),

                SizedBox(
                  height: 20,
                ),

                Row(children: [
                  Expanded(child: Container(height: 1, color: Colors.black)),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 5),
                    child: Text('Or continue with:'),
                  ),
                  Expanded(child: Container(height: 1, color: Colors.black)),
                ]),
                SizedBox(
                  height: 20,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Container(
                      padding: EdgeInsets.all(10),
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.grey.shade600),
                          borderRadius: BorderRadius.circular(5)),
                      height: 70,
                      child: Image.asset(
                        "lib/assets/google.png",
                        height: 40,
                      ),
                    ),
                    Text("Or"),
                    Container(
                      padding: EdgeInsets.all(10),
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.grey.shade600),
                          borderRadius: BorderRadius.circular(5)),
                      height: 70,
                      child: Image.asset(
                        "lib/assets/facebook.png",
                        height: 40,
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}


Is there a way to do all this without disrupting the code I already have?有没有办法在不破坏我已经拥有的代码的情况下完成这一切?

Please follow flutterfire_ui,请关注flutterfire_ui,

https://github.com/firebase/flutterfire/tree/master/packages/flutterfire_ui https://github.com/firebase/flutterfire/tree/master/packages/flutterfire_ui

https://github.com/firebase/flutterfire/tree/master/packages/flutterfire_ui/lib/src/auth/screens https://github.com/firebase/flutterfire/tree/master/packages/flutterfire_ui/lib/src/auth/screens

You can copy standard registration/login flow (screens) into your App from firebase-ui patterns.您可以将标准注册/登录流程(屏幕)从 firebase-ui 模式复制到您的应用程序中。

All the best!!!一切顺利!!!

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

相关问题 flutter 同号注册 - flutter sign up with same account 用户在 flutter 中使用 FirebaseAuth 注册 android 应用程序后导航到页面 - Navigate to a page after user sign up in the android app in flutter using FirebaseAuth 注册后如何获取currentUser的uid flutter firebase - How to get uid of currentUser after sign up in flutter firebase 如何在 flutter 中限制应用程序的高级功能? - How to restrict premium features of app in flutter? Flutter:注册成功后如何让用户自动登录? - Flutter: How to make user login automatically after register successfully? Firebase:如何在应用检查中注册我的 Flutter 应用? - Firebase: How do I register my Flutter app in app check? 将虚拟图像保存到 FirebaseStorage flutter 以便用户在注册后稍后更新它们 - save dummy image to FirebaseStorage flutter for user update them later after sign up 如何在 Flutter Android 上编写 Firebase 用 Apple 登录的功能 - How to write Firebase Functions for Sign in with Apple on Flutter Android Flutter Firestore 问题:无法在 Cloud Firestore 数据库中存储注册表单数据,而是存储硬编码数据 - Flutter Firestore Issue: Not able to store Sign Up form data in Cloud Firestore DB, instead hard coded data is getting stored 在注册时存储用户名仅在页面刷新后显示 (Firebase) - Storing a username on sign up only displays after page refresh (Firebase)
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM