diff --git a/lib/app/app_page.dart b/lib/app/app_page.dart index 953d29a..aea177e 100644 --- a/lib/app/app_page.dart +++ b/lib/app/app_page.dart @@ -28,6 +28,8 @@ class AppPage extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.center, children: [ NcButton( + width: MediaQuery.of(context).size.width * 0.6, + height: 100, caption: "Quero testar a plataforma", backgroundColor: Colors.black, captionColor: Colors.white, @@ -39,6 +41,8 @@ class AppPage extends StatelessWidget { height: 40, ), NcButton( + width: MediaQuery.of(context).size.width * 0.6, + height: 100, caption: "Já sou cliente", backgroundColor: Colors.black, captionColor: Colors.white, diff --git a/lib/app/login/login_page.dart b/lib/app/login/login_page.dart index 60d02be..433c58c 100644 --- a/lib/app/login/login_page.dart +++ b/lib/app/login/login_page.dart @@ -1,5 +1,8 @@ import 'package:flutter/material.dart'; import 'package:pcast/components/nc_base_page.dart'; +import 'package:pcast/components/nc_button.dart'; +import 'package:pcast/components/nc_text_field.dart'; +import 'package:velocity_x/velocity_x.dart'; Route routeBuilder(BuildContext ctx, RouteSettings settings) { return PageRouteBuilder( @@ -22,21 +25,37 @@ class LoginPage extends StatefulWidget { } class _LoginPageState extends State { + TextEditingController controller = TextEditingController(); + @override Widget build(BuildContext context) { - return const NcBasePage( + return NcBasePage( body: Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - "Login Page", - style: TextStyle( - color: Colors.white, - fontSize: 40, + child: SizedBox( + width: MediaQuery.of(context).size.width * 0.6, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + "Informe o seu email".text.white.italic.xl4.make(), + const SizedBox( + height: 40, ), - ), - ], + NCTextField(hintText: "Email", controller: controller), + const SizedBox( + height: 40, + ), + NcButton( + width: 250, + height: 80, + caption: "Próximo", + backgroundColor: Colors.black, + captionColor: Colors.red, + onPressed: () => { + print(controller.text), + }, + ), + ], + ), ), ), ); diff --git a/lib/components/nc_button.dart b/lib/components/nc_button.dart index 322b84f..921dfa9 100644 --- a/lib/components/nc_button.dart +++ b/lib/components/nc_button.dart @@ -2,23 +2,34 @@ import 'package:flutter/material.dart'; import 'package:velocity_x/velocity_x.dart'; class NcButton extends StatelessWidget { - const NcButton({super.key, required this.caption, required this.backgroundColor, required this.captionColor, this.onPressed}); + const NcButton({ + super.key, + required this.caption, + required this.backgroundColor, + required this.captionColor, + this.onPressed, + required this.width, + required this.height, + }); final String caption; final Color backgroundColor; final Color captionColor; + final double width; + final double height; final void Function()? onPressed; @override Widget build(BuildContext context) { return SizedBox( - width: 500, - height: 100, + width: width, + height: height, child: ElevatedButton( onPressed: onPressed, style: ElevatedButton.styleFrom( - backgroundColor: backgroundColor, - foregroundColor: captionColor, + padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20), + backgroundColor: Colors.black, + foregroundColor: Colors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), diff --git a/lib/components/nc_text_field.dart b/lib/components/nc_text_field.dart new file mode 100644 index 0000000..331018f --- /dev/null +++ b/lib/components/nc_text_field.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; + +class NCTextField extends StatelessWidget { + const NCTextField({super.key, required this.hintText, required this.controller}); + + final String hintText; + + final TextEditingController controller; + + @override + Widget build(BuildContext context) { + return TextField( + controller: controller, + decoration: InputDecoration( + hintText: hintText, + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: const BorderSide(color: Colors.black), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: const BorderSide(color: Colors.black), + ), + ), + ); + } +}