본문 바로가기

Ui

CustumClipper 로그인 페이지 디자인.

  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