config security input suffix icon

This commit is contained in:
appflowy 2021-07-25 22:09:52 +08:00
parent 771162e80b
commit 7a32d4a087
6 changed files with 92 additions and 30 deletions
app_flowy
lib/user
infrastructure
presentation/sign_in
packages

View File

@ -1,5 +1,7 @@
import 'package:app_flowy/workspace/presentation/home/home_screen.dart'; import 'package:app_flowy/workspace/presentation/home/home_screen.dart';
import 'package:dartz/dartz.dart'; import 'package:dartz/dartz.dart';
import 'package:flowy_infra/time/duration.dart';
import 'package:flowy_infra_ui/widget/route/animation.dart';
import 'package:flowy_sdk/protobuf/flowy-user/protobuf.dart'; import 'package:flowy_sdk/protobuf/flowy-user/protobuf.dart';
import 'package:app_flowy/user/domain/i_auth.dart'; import 'package:app_flowy/user/domain/i_auth.dart';
import 'package:app_flowy/user/infrastructure/repos/auth_repo.dart'; import 'package:app_flowy/user/infrastructure/repos/auth_repo.dart';
@ -37,14 +39,7 @@ class AuthRouterImpl extends IAuthRouter {
@override @override
void showHomeScreen(BuildContext context, UserDetail user) { void showHomeScreen(BuildContext context, UserDetail user) {
Navigator.pushReplacement( Navigator.of(context).push(PageRoutes.fade(() => HomeScreen(user)));
context,
MaterialPageRoute(
builder: (context) {
return HomeScreen(user);
},
),
);
} }
@override @override

View File

@ -121,7 +121,7 @@ class LoginButton extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return RoundedButton( return RoundedTextButton(
title: 'Login', title: 'Login',
height: 65, height: 65,
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),

View File

@ -13,4 +13,5 @@ class Durations {
class RouteDurations { class RouteDurations {
static Duration get slow => .7.seconds; static Duration get slow => .7.seconds;
static Duration get medium => .35.seconds;
} }

View File

@ -1,6 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class RoundedButton extends StatelessWidget { class RoundedTextButton extends StatelessWidget {
final VoidCallback? press; final VoidCallback? press;
final String? title; final String? title;
final double? width; final double? width;
@ -10,7 +10,7 @@ class RoundedButton extends StatelessWidget {
final Color color; final Color color;
final Color textColor; final Color textColor;
const RoundedButton({ const RoundedTextButton({
Key? key, Key? key,
this.press, this.press,
this.title, this.title,
@ -48,3 +48,39 @@ class RoundedButton extends StatelessWidget {
); );
} }
} }
class RoundedImageButton extends StatelessWidget {
final VoidCallback? press;
final double size;
final BorderRadius borderRadius;
final Color borderColor;
final Color color;
final Widget child;
const RoundedImageButton({
Key? key,
this.press,
required this.size,
this.borderRadius = BorderRadius.zero,
this.borderColor = Colors.transparent,
this.color = Colors.transparent,
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
width: size,
height: size,
child: TextButton(
onPressed: press,
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: borderRadius,
))),
child: child,
),
);
}
}

View File

@ -1,8 +1,10 @@
import 'package:flowy_infra_ui/widget/rounded_button.dart';
import 'package:flowy_infra_ui/widget/text_field_container.dart'; import 'package:flowy_infra_ui/widget/text_field_container.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flowy_infra/time/duration.dart'; import 'package:flowy_infra/time/duration.dart';
class RoundedInputField extends StatelessWidget { // ignore: must_be_immutable
class RoundedInputField extends StatefulWidget {
final String? hintText; final String? hintText;
final IconData? icon; final IconData? icon;
final bool obscureText; final bool obscureText;
@ -10,8 +12,9 @@ class RoundedInputField extends StatelessWidget {
final Color highlightBorderColor; final Color highlightBorderColor;
final String errorText; final String errorText;
final ValueChanged<String>? onChanged; final ValueChanged<String>? onChanged;
late bool enableObscure;
const RoundedInputField({ RoundedInputField({
Key? key, Key? key,
this.hintText, this.hintText,
this.icon, this.icon,
@ -20,20 +23,27 @@ class RoundedInputField extends StatelessWidget {
this.normalBorderColor = Colors.transparent, this.normalBorderColor = Colors.transparent,
this.highlightBorderColor = Colors.transparent, this.highlightBorderColor = Colors.transparent,
this.errorText = "", this.errorText = "",
}) : super(key: key); }) : super(key: key) {
enableObscure = obscureText;
}
@override
State<RoundedInputField> createState() => _RoundedInputFieldState();
}
class _RoundedInputFieldState extends State<RoundedInputField> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final Icon? newIcon = icon == null final Icon? newIcon = widget.icon == null
? null ? null
: Icon( : Icon(
icon!, widget.icon!,
color: const Color(0xFF6F35A5), color: const Color(0xFF6F35A5),
); );
var borderColor = normalBorderColor; var borderColor = widget.normalBorderColor;
if (errorText.isNotEmpty) { if (widget.errorText.isNotEmpty) {
borderColor = highlightBorderColor; borderColor = widget.highlightBorderColor;
} }
List<Widget> children = [ List<Widget> children = [
@ -41,28 +51,46 @@ class RoundedInputField extends StatelessWidget {
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
borderColor: borderColor, borderColor: borderColor,
child: TextFormField( child: TextFormField(
onChanged: onChanged, onChanged: widget.onChanged,
cursorColor: const Color(0xFF6F35A5), cursorColor: const Color(0xFF6F35A5),
obscureText: obscureText, obscureText: widget.enableObscure,
decoration: InputDecoration( decoration: InputDecoration(
icon: newIcon, icon: newIcon,
hintText: hintText, hintText: widget.hintText,
border: InputBorder.none, border: InputBorder.none,
suffixIcon: suffixIcon(),
), ),
), ),
), ),
]; ];
if (errorText.isNotEmpty) { if (widget.errorText.isNotEmpty) {
children children.add(Text(
.add(Text(errorText, style: TextStyle(color: highlightBorderColor))); widget.errorText,
style: TextStyle(color: widget.highlightBorderColor),
));
} }
return AnimatedContainer( return AnimatedSize(
duration: .3.seconds, duration: .4.seconds,
curve: Curves.easeInOut,
child: Column( child: Column(
children: children, children: children,
), ),
); );
} }
Widget? suffixIcon() {
if (widget.obscureText == false) {
return null;
}
return RoundedImageButton(
size: 20,
press: () {
widget.enableObscure = !widget.enableObscure;
setState(() {});
},
child: const Icon(Icons.password, size: 15),
);
}
} }

View File

@ -5,22 +5,24 @@ class TextFieldContainer extends StatelessWidget {
final Widget child; final Widget child;
final BorderRadius borderRadius; final BorderRadius borderRadius;
final Color borderColor; final Color borderColor;
final Size? size; final double? height;
final double? width;
const TextFieldContainer({ const TextFieldContainer({
Key? key, Key? key,
required this.child, required this.child,
this.borderRadius = BorderRadius.zero, this.borderRadius = BorderRadius.zero,
this.borderColor = Colors.white, this.borderColor = Colors.white,
this.size, this.height,
this.width,
}) : super(key: key); }) : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
double height = size == null ? 50 : size!.height;
return Container( return Container(
margin: const EdgeInsets.symmetric(vertical: 10), margin: const EdgeInsets.symmetric(vertical: 10),
padding: const EdgeInsets.symmetric(horizontal: 15), padding: const EdgeInsets.symmetric(horizontal: 15),
height: height, height: height,
width: width,
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border.all(color: borderColor), border: Border.all(color: borderColor),
color: Colors.white, color: Colors.white,