Login Fresh
LogiFresh 帮助您轻松构建一个设计友好且结构灵活的登录界面。
使用演示
首先，您需要下载 GitHub 存储库并运行以下命令：
git clone https://github.com/Krysthyan/login_fresh.git
cd login_fresh/demo
flutter run
 |
 |
|---|---|
 |
 |
示例
您可以在 演示项目 中查看完整的演示。
示例完整代码
import 'package:flutter/material.dart';
import 'package:login_fresh/login_fresh.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
//You have to create a list with the type of login's that you are going to import into your application
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
body: buildLoginFresh()));
}
LoginFresh buildLoginFresh() {
List<LoginFreshTypeLoginModel> listLogin = [
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
// develop what they want the facebook to do when the user clicks
},
logo: TypeLogo.FACEBOOK),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
// develop what they want the Google to do when the user clicks
},
logo: TypeLogo.GOOGLE),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
print("APPLE");
// develop what they want the Apple to do when the user clicks
},
logo: TypeLogo.APPLE),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
Navigator.of(_buildContext).push(MaterialPageRoute(
builder: (_buildContext) => widgetLoginFreshUserAndPassword(),
));
},
logo: TypeLogo.USER_PASSWORD),
];
return LoginFresh(
pathLogo: 'assets/logo.png',
isExploreApp: true,
functionExploreApp: () {
// develop what they want the ExploreApp to do when the user clicks
},
isFooter: true,
widgetFooter: this.widgetFooter(),
typeLoginModel: listLogin,
isSignUp: true,
widgetSignUp: this.widgetLoginFreshSignUp(),
);
}
Widget widgetLoginFreshUserAndPassword() {
return LoginFreshUserAndPassword(
callLogin: (BuildContext _context, Function isRequest,
String user, String password) {
isRequest(true);
Future.delayed(Duration(seconds: 2), () {
print('-------------- function call----------------');
print(user);
print(password);
print('-------------- end call----------------');
isRequest(false);
});
},
logo: './assets/logo_head.png',
isFooter: true,
widgetFooter: this.widgetFooter(),
isResetPassword: true,
widgetResetPassword: this.widgetResetPassword(),
isSignUp: true,
signUp: this.widgetLoginFreshSignUp(),
);
}
Widget widgetResetPassword() {
return LoginFreshResetPassword(
logo: 'assets/logo_head.png',
funResetPassword: (BuildContext _context, Function isRequest, String email) {
isRequest(true);
Future.delayed(Duration(seconds: 2), () {
print('-------------- function call----------------');
print(email);
print('-------------- end call----------------');
isRequest(false);
});
},
isFooter: true,
widgetFooter: this.widgetFooter(),
);
}
Widget widgetFooter() {
return LoginFreshFooter(
logo: 'assets/logo_footer.png',
text: 'Power by',
funFooterLogin: () {
// develop what they want the footer to do when the user clicks
},
);
}
Widget widgetLoginFreshSignUp() {
return LoginFreshSignUp(
isFooter: true,
widgetFooter: this.widgetFooter(),
logo: 'assets/logo_head.png',
funSignUp: (BuildContext _context, Function isRequest,
SignUpModel signUpModel) {
isRequest(true);
print(signUpModel.email);
print(signUpModel.password);
print(signUpModel.repeatPassword);
print(signUpModel.surname);
print(signUpModel.name);
isRequest(false);
});
}
}
用户名和密码登录
Widget widgetLoginFreshUserAndPassword() {
return LoginFreshUserAndPassword(
callLogin: (BuildContext _context, Function isRequest,
String user, String password) {
isRequest(true);
Future.delayed(Duration(seconds: 2), () {
print('-------------- function call----------------');
print(user);
print(password);
print('-------------- end call ----------------');
isRequest(false);
});
},
logo: './assets/logo_head.png',
isFooter: true,
widgetFooter: this.widgetFooter(),
isResetPassword: true,
widgetResetPassword: this.widgetResetPassword(),
isSignUp: true,
signUp: this.widgetLoginFreshSignUp(),
);
}
当用户点击登录按钮时，LoginFreshUserAndPassword 会调用添加到 callLogin 的函数，该函数接收 4 个参数：BuildContext _context, Function isRequest, String user, String password。
isRequest 用于在用户点击登录按钮时在登录按钮部分添加加载状态。要启用此功能，请在 callLogin 中调用该方法并传入 true 参数 isRequest(true)。在完成所有必要代码开发后，您必须将 isRequest 设置为 false，以便登录按钮重新显示（这适用于凭据不正确或查询 API 必须等待服务器响应的情况）。您可以在示例中看到我添加了一个计时器 (Future.delayed)，在调用 callLogin 后，2 秒钟后登录按钮会重新启用。
在 LogiFresh 中，您可以包含一个底部小部件，在本例中可以使用 LoginFreshFooter，或者您可以自己构建想要放在该部分的小部件。
Widget widgetFooter() {
return LoginFreshFooter(
logo: 'assets/logo_footer.png',
text: 'Power by',
funFooterLogin: () {
// develop what they want the footer to do when the user clicks
},
);
}
此外，您可以启用用户注册功能，捕获用户的信息，例如（电子邮件、姓名、姓氏、密码、重复密码）。要实现此功能，您需要将变量 isSignUp: true，并在 signUp 中调用 LoginFreshSingUp 小部件。下面您可以查看构建该小部件的示例。此小部件需要传递一个函数，该函数接收 3 个参数：BuildContext _context, Function isRequest, SignUpModel signUpModel。isRequest 方法具有与上面解释相同的功能，signUpModel 包含用户点击注册按钮时输入的信息。
Widget widgetLoginFreshSignUp() {
return LoginFreshSignUp(
isFooter: true,
widgetFooter: this.widgetFooter(),
logo: 'assets/logo_head.png',
funSignUp: (BuildContext _context, Function isRequest, SignUpModel signUpModel) {
isRequest(true);
print(signUpModel.email);
print(signUpModel.password);
print(signUpModel.repeatPassword);
print(signUpModel.surname);
print(signUpModel.name);
isRequest(false);
});
}
最后是 LoginFreshResetPassword 小部件，它允许用户通过电子邮件请求更改密码。在此小部件的返回函数中，您必须添加 3 个参数：BuildContext _context, Function isRequest, String email。isRequest 具有上面解释的功能，而 email 是小部件返回的字符串。
Widget widgetResetPassword() {
return LoginFreshResetPassword(
logo: 'assets/logo_head.png',
funResetPassword: (BuildContext _context, Function isRequest, String email) {
isRequest(true);
Future.delayed(Duration(seconds: 2), () {
print('-------------- function call----------------');
print(email);
print('-------------- end call ----------------');
isRequest(false);
});
},
isFooter: true,
widgetFooter: this.widgetFooter(),
);
}
每个小部件的参数中，有些是可选的，但有助于个性化您的登录界面。下面将解释每个参数的功能：
logo-> 此参数用于输入我们想要放在登录界面上的图片的 URL。textColor-> 您可以为登录界面上的文本指定颜色，例如Color (0xFFE7004C)。backgroundColor-> 这是主要登录颜色的自定义。您可以指定您想要的颜色，例如Color (0xFFE7004C)。loginFreshWords-> 这是一个类，您可以在其中指定或自定义登录界面中的字符串，例如LoginFresWords (login: 'Login fesh', signUp: 'Sign Up Fresh', ...)。
使用社交网络登录
LoginFresh 提供添加各种登录方式的功能，您可以根据需要自行编程，下面我将提供一个示例和工作原理的解释。
LoginFresh buildLoginFresh() {
List<LoginFreshTypeLoginModel> listLogin = [
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
// develop what they want the facebook to do when the user clicks
},
logo: TypeLogo.FACEBOOK),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
// develop what they want the Google to do when the user clicks
},
logo: TypeLogo.GOOGLE),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
print("APPLE");
// develop what they want the Apple to do when the user clicks
},
logo: TypeLogo.APPLE),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
Navigator.of(_buildContext).push(MaterialPageRoute(
builder: (_buildContext) => widgetLoginFreshUserAndPassword(),
));
},
logo: TypeLogo.USER_PASSWORD),
];
return LoginFresh(
pathLogo: 'assets/logo.png',
isExploreApp: true,
functionExploreApp: () {
// develop what they want the ExploreApp to do when the user clicks
},
isFooter: true,
widgetFooter: this.widgetFooter(),
typeLoginModel: listLogin,
isSignUp: true,
widgetSignUp: this.widgetLoginFreshSignUp(),
);
}
创建 LoginFresh 所需做的第一件事是创建一个列表，其中包含我们将在应用程序中使用的登录类型。下面我将解释 LoginFreshTypeLoginModel 是什么。
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
// develop what they want the facebook to do when the user clicks
},
logo: TypeLogo.FACEBOOK),
它有两个参数：callFunction, logo。第一个是用户点击该登录类型时将执行的函数，您可以根据需要编程，例如，如果您想为 Facebook 构建登录，您可以在其中完成所有功能并导入必要的库。此外，还有一个 logo 参数，用于使用 LoginFresh 的徽标，但您可以放置您想要的任何徽标。logo 是一个字符串，您可以在其中放置要放置的图像的路径。
在其中，您还可以添加用户登录和密码，如下例所示：widgetLoginFreshUserAndPassword() 是一个函数，它已在前面指定，其中解释了如何构建 LoginFreshUserAndPassword 小部件。
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
Navigator.of(_buildContext).push(MaterialPageRoute(
builder: (_buildContext) => widgetLoginFreshUserAndPassword(),
));
},
logo: TypeLogo.USER_PASSWORD),
反馈
您的评论和建议对于 LoginFresh 的发展非常重要。因此，您可以将它们留在 [github] 存储库 (https://github.com/Krysthyan/login_fresh) 中，或者您可以创建分支来改进该包。我感谢您的合作：😊😊。如果您需要帮助，请写信给我：[email protected]。
示例
您可以在此处查看完整的演示：演示项目
示例完整代码
import 'package:flutter/material.dart';
import 'package:login_fresh/login_fresh.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
//You have to create a list with the type of login's that you are going to import into your application
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
body: buildLoginFresh()));
}
LoginFresh buildLoginFresh() {
List<LoginFreshTypeLoginModel> listLogin = [
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
// develop what they want the facebook to do when the user clicks
},
logo: TypeLogo.FACEBOOK),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
// develop what they want the Google to do when the user clicks
},
logo: TypeLogo.GOOGLE),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
print("APPLE");
// develop what they want the Apple to do when the user clicks
},
logo: TypeLogo.APPLE),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
Navigator.of(_buildContext).push(MaterialPageRoute(
builder: (_buildContext) => widgetLoginFreshUserAndPassword(),
));
},
logo: TypeLogo.USER_PASSWORD),
];
return LoginFresh(
pathLogo: 'assets/logo.png',
isExploreApp: true,
functionExploreApp: () {
// develop what they want the ExploreApp to do when the user clicks
},
isFooter: true,
widgetFooter: this.widgetFooter(),
typeLoginModel: listLogin,
isSignUp: true,
widgetSignUp: this.widgetLoginFreshSignUp(),
);
}
Widget widgetLoginFreshUserAndPassword() {
return LoginFreshUserAndPassword(
callLogin: (BuildContext _context, Function isRequest,
String user, String password) {
isRequest(true);
Future.delayed(Duration(seconds: 2), () {
print('-------------- function call----------------');
print(user);
print(password);
print('-------------- end call----------------');
isRequest(false);
});
},
logo: './assets/logo_head.png',
isFooter: true,
widgetFooter: this.widgetFooter(),
isResetPassword: true,
widgetResetPassword: this.widgetResetPassword(),
isSignUp: true,
signUp: this.widgetLoginFreshSignUp(),
);
}
Widget widgetResetPassword() {
return LoginFreshResetPassword(
logo: 'assets/logo_head.png',
funResetPassword: (BuildContext _context, Function isRequest, String email) {
isRequest(true);
Future.delayed(Duration(seconds: 2), () {
print('-------------- function call----------------');
print(email);
print('-------------- end call----------------');
isRequest(false);
});
},
isFooter: true,
widgetFooter: this.widgetFooter(),
);
}
Widget widgetFooter() {
return LoginFreshFooter(
logo: 'assets/logo_footer.png',
text: 'Power by',
funFooterLogin: () {
// develop what they want the footer to do when the user clicks
},
);
}
Widget widgetLoginFreshSignUp() {
return LoginFreshSignUp(
isFooter: true,
widgetFooter: this.widgetFooter(),
logo: 'assets/logo_head.png',
funSignUp: (BuildContext _context, Function isRequest,
SignUpModel signUpModel) {
isRequest(true);
print(signUpModel.email);
print(signUpModel.password);
print(signUpModel.repeatPassword);
print(signUpModel.surname);
print(signUpModel.name);
isRequest(false);
});
}
}
用户名和密码登录
Widget widgetLoginFreshUserAndPassword() {
return LoginFreshUserAndPassword(
callLogin: (BuildContext _context, Function isRequest,
String user, String password) {
isRequest(true);
Future.delayed(Duration(seconds: 2), () {
print('-------------- function call----------------');
print(user);
print(password);
print('-------------- end call ----------------');
isRequest(false);
});
},
logo: './assets/logo_head.png',
isFooter: true,
widgetFooter: this.widgetFooter(),
isResetPassword: true,
widgetResetPassword: this.widgetResetPassword(),
isSignUp: true,
signUp: this.widgetLoginFreshSignUp(),
);
}
当用户点击登录按钮时，LoginFreshUserAndPassword 会调用添加到 callLogin 的函数，该函数接收 4 个参数：BuildContext _context, Function isRequest, String user, String password。
isRequest 用于在用户点击登录按钮时在登录按钮部分添加加载状态。要启用此功能，请在 callLogin 中调用该方法并传入 true 参数 isRequest(true)。在完成所有必要代码开发后，您必须将 isRequest 设置为 false，以便登录按钮重新显示（这适用于凭据不正确或查询 API 必须等待服务器响应的情况）。您可以在示例中看到我添加了一个计时器 (Future.delayed)，在调用 callLogin 后，2 秒钟后登录按钮会重新启用。
在 LoginFresh 中，您可以包含一个底部小部件。对于这种情况，您可以使用 LoginFreshFooter，或者您可以构建自己的小部件并将其包含在登录界面中。
Widget widgetFooter() {
return LoginFreshFooter(
logo: 'assets/logo_footer.png',
text: 'Power by',
funFooterLogin: () {
// develop what they want the footer to do when the user clicks
},
);
}
此外，您可以启用用户注册功能，捕获用户的信息，例如（电子邮件、姓名、姓氏、密码、重复密码）。要实现此功能，您需要将变量 isSignUp: true，并在 signUp 中调用 LoginFreshSingUp 小部件。下面您可以查看构建该小部件的示例。此小部件需要传递一个函数，该函数接收 3 个参数：BuildContext _context, Function isRequest, SignUpModel signUpModel。isRequest 方法具有与上面解释相同的功能，signUpModel 包含用户点击注册按钮时输入的信息。
Widget widgetLoginFreshSignUp() {
return LoginFreshSignUp(
isFooter: true,
widgetFooter: this.widgetFooter(),
logo: 'assets/logo_head.png',
funSignUp: (BuildContext _context, Function isRequest, SignUpModel signUpModel) {
isRequest(true);
print(signUpModel.email);
print(signUpModel.password);
print(signUpModel.repeatPassword);
print(signUpModel.surname);
print(signUpModel.name);
isRequest(false);
});
}
最后是 LoginFreshResetPassword 小部件，它允许用户通过电子邮件请求更改密码。在此小部件的返回函数中，您必须添加 3 个参数：BuildContext _context, Function isRequest, String email。isRequest 具有上面解释的功能，而 email 是小部件返回的字符串。
Widget widgetResetPassword() {
return LoginFreshResetPassword(
logo: 'assets/logo_head.png',
funResetPassword: (BuildContext _context, Function isRequest, String email) {
isRequest(true);
Future.delayed(Duration(seconds: 2), () {
print('-------------- function call----------------');
print(email);
print('-------------- end call ----------------');
isRequest(false);
});
},
isFooter: true,
widgetFooter: this.widgetFooter(),
);
}
每个小部件的参数中，有些是可选的，但有助于个性化您的登录界面。下面将解释每个参数的功能：
logo-> 此参数用于输入我们想要放在登录界面上的图片的 URL。textColor-> 您可以为登录界面上的文本指定颜色，例如Color(0xFFE7004C)。backgroundColor-> 这是主要登录颜色的自定义。您可以指定您想要的颜色，例如Color(0xFFE7004C)。loginFreshWords-> 这是一个类，您可以在其中指定或自定义登录界面中的字符串，例如LoginFresWords (login: 'Login fesh', signUp: 'Sign Up Fresh', ...)。
使用社交网络登录
LoginFresh 提供添加各种登录方式的功能，您可以根据需要自行编程，下面我将提供一个示例和工作原理的解释。
LoginFresh buildLoginFresh() {
List<LoginFreshTypeLoginModel> listLogin = [
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
// develop what they want the facebook to do when the user clicks
},
logo: TypeLogo.FACEBOOK),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
// develop what they want the Google to do when the user clicks
},
logo: TypeLogo.GOOGLE),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
print("APPLE");
// develop what they want the Apple to do when the user clicks
},
logo: TypeLogo.APPLE),
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
Navigator.of(_buildContext).push(MaterialPageRoute(
builder: (_buildContext) => widgetLoginFreshUserAndPassword(),
));
},
logo: TypeLogo.USER_PASSWORD),
];
return LoginFresh(
pathLogo: 'assets/logo.png',
isExploreApp: true,
functionExploreApp: () {
// develop what they want the ExploreApp to do when the user clicks
},
isFooter: true,
widgetFooter: this.widgetFooter(),
typeLoginModel: listLogin,
isSignUp: true,
widgetSignUp: this.widgetLoginFreshSignUp(),
);
}
创建 LoginFresh 所需做的第一件事是创建一个列表，其中包含我们将在应用程序中使用的登录类型。下面我将解释 LoginFreshTypeLoginModel 是什么。
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
// develop what they want the facebook to do when the user clicks
},
logo: TypeLogo.FACEBOOK),
它有两个参数：callFunction, logo。第一个是用户点击该登录类型时将执行的函数，您可以根据需要编程，例如，如果您想为 Facebook 构建登录，您可以在其中完成所有功能并导入必要的库。此外，还有一个 logo 参数，用于使用 LoginFresh 的徽标，但您可以放置您想要的任何徽标。logo 是一个字符串，您可以在其中放置要放置的图像的路径。
在其中，您还可以添加用户登录和密码，如下例所示：widgetLoginFreshUserAndPassword() 是一个函数，它已在前面指定，其中解释了如何构建 LoginFreshUserAndPassword 小部件。
LoginFreshTypeLoginModel(
callFunction: (BuildContext _buildContext) {
Navigator.of(_buildContext).push(MaterialPageRoute(
builder: (_buildContext) => widgetLoginFreshUserAndPassword(),
));
},
logo: TypeLogo.USER_PASSWORD),
