late TextEditingController emailController;
late TextEditingController passwordController;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
drawer: ADrawer(),
appBar: AppBar(
title: Text('Google LogIn'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
SizedBox(
height: MediaQuery.sizeOf(context).height * 0.7,
width: double.infinity,
child:ClipPath(
clipper: CustomClipperWidget(),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Colors.purple, Color.fromARGB(155, 20, 30, 230)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
)), //그라디언트 color따로 에러남
child: Padding(
padding: const EdgeInsets.fromLTRB(30,8,30,8),
child: Column(
children: [
SizedBox(height: 50),
const Text(
'CustumClipper',
style: TextStyle(color: Colors.white, fontSize: 35, fontWeight: FontWeight.w800, letterSpacing: 1),
),
SizedBox(height: 50),
_build_TextField(emailController, Icons.person_outline, "Email"),
SizedBox(height: 20),
_build_TextField(passwordController, Icons.key, "PassWord", isPassword: true),
const SizedBox(height: 30),
ElevatedButton(onPressed: () {}, child: const Text('LOGIN')),
const SizedBox(height: 10),
TextButton(
onPressed: () {
String email = emailController.text.trim();
String password = passwordController.text.trim();
print('Email : $email Password: $password');
},
child: const Text('forgot password', style: TextStyle(color: Colors.white70, fontSize: 16))),
],
),
),
),
);
Widget _build_SocialLogins() {
return Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(width:80,child: IconButton(onPressed: (){}, icon: Image.asset("assets/images/google.png"))),
SizedBox(width:80,child: IconButton(onPressed: (){}, icon: Image.asset("assets/images/naver.png"))),
SizedBox(width:80,child: IconButton(onPressed: (){}, icon: Image.asset("assets/images/apple.png"))),
SizedBox(width:90,child: IconButton(onPressed: (){}, icon: Image.asset("assets/images/cacao.png"))),
],
)
],
),
),
);
}
Widget _build_TextField(TextEditingController controller, IconData icon, String hint, {bool isPassword = false}) {
return TextField(
controller: controller,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: hint,
hintStyle: const TextStyle(color: Colors.white),
prefixIcon: Icon(
icon,
color: Colors.white,
),
filled: true,
fillColor: Colors.white.withOpacity(0.1),
border: const OutlineInputBorder(borderSide: BorderSide.none), //아웃라운지우기
),
obscureText: isPassword, //비번숨기기 기본 false
);
}
import 'package:flutter/material.dart';
class CustomClipperWidget extends CustomClipper<Path>{
@override
Path getClip(Size size){
Path path = Path();
path.moveTo(0, 0);
path.lineTo(0, size.height*0.8);
path.quadraticBezierTo(size.width*0.7, size.height , size.width, size.height*0.9);
path.lineTo(size.width, 0);
path.close();
return path;
}
// @override
// bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
// return false;
// }
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return false;
}
}
'Ui' 카테고리의 다른 글
Ui 배경화면 설정에서 그라디언트까지, set Background (0) | 2023.12.17 |
---|---|
Simple note Ui (1) | 2023.12.15 |
Ui Flutter Design Morphism 로그인 (0) | 2023.12.14 |
Ui login design (0) | 2023.12.12 |
Design Glass Morphism 로그인 (0) | 2023.12.12 |