Ui login design

 

---

에뮬레이터는 길이가 짧아서 인지 . 짜리몽땅하게 나왔습니다. 기기마다 위아래 변화가 보이는 모습에 영향을 많이 주는듯 

 

코드와 완성이미지는 아래에 

import 'package:flutter/material.dart';
import 'package:noti_local/a_drawer.dart';

class UiFallLogin extends StatefulWidget {
  const UiFallLogin({super.key});

  @override
  State<UiFallLogin> createState() => _UiFallLoginState();
}

class _UiFallLoginState extends State<UiFallLogin> {
  late Color mainColor;
  late Size mediaSize;
  late TextEditingController emailController;
  late TextEditingController passwordController;
  bool rememberUser = false;

  @override
  void initState() {
    emailController = TextEditingController();
    passwordController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    emailController.dispose();
    passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    mainColor = Theme.of(context).primaryColor;

    mediaSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(title: Text('fall in login')),
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: const NetworkImage('https://cdn.pixabay.com/photo/2017/10/24/19/51/nature-2885950_640.jpg'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(mainColor.withOpacity(0.8), BlendMode.dstATop),
          ),
        ),
        child: Stack(
          children: [
            Positioned(top: 0, child: _buildTop()),
           Positioned(bottom: 0, child: _buildBottom()),
          ],
        ),
      ),
    );
  }

  Widget _buildTop() {
    return SizedBox(
        width: mediaSize.width,
        child: const Column(
          children: [
            Icon(Icons.apple, size: 100, color: Colors.white),
            Text('Sign in',
                style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 40, letterSpacing: 2)),
          ],
        ));
  }

  Widget _buildBottom() {
    return Container(
      width: mediaSize.width,
      child: Card(
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30),
          topRight: Radius.circular(300),
          bottomLeft: Radius.circular(30),
          bottomRight: Radius.circular(30),
        )),
        child: Padding(
          padding: const EdgeInsets.all(32.0),
          child: _buildForm(),
        ),
      ),
    );
  }

  Widget _buildForm() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'fall in leaves',
          style: TextStyle(color: Colors.white, fontSize: 32, fontWeight: FontWeight.w500),
        ),
        Text('Login for October Mountain and more.', style: TextStyle(color: Colors.white70)),
        SizedBox(height: 60),
        _buildText('Email address', Colors.white70),
        _buildInputField(emailController),
        const SizedBox(height: 40),
        _buildText('Password', Colors.white70),
        _buildInputField(passwordController, isPassword: true),
        _buildRememberUser(),
        _buildLoginButton(),
//        _build_SocialLogins(),
      ],
    );
  }

  Widget _buildText(String text, Color color) {
    return Text(text, style: TextStyle(color: color));
  }

  Widget _buildInputField(TextEditingController controler, {isPassword = false}) {
    return TextField(
      controller: controler,
      decoration: InputDecoration(suffixIcon: isPassword ? Icon(Icons.remove_red_eye) : Icon(Icons.done)),
      obscureText: isPassword,
    );
  }

  Widget _buildRememberUser() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            Checkbox(
                value: rememberUser,
                onChanged: (v) {
                  setState(() {
                    rememberUser = v!;
                  });
                }),
            _buildText('remember login', Colors.grey),
          ],
        ),
        Spacer(),
        Icon(
          Icons.search,
          color: Colors.grey,
        ),
        TextButton(onPressed: () {}, child: _buildText('find passworrd', Colors.white54)),
      ],
    );
  }

  Widget _buildLoginButton() {
    return ElevatedButton(
        onPressed: () {},
        style: ElevatedButton.styleFrom(
          shape: const StadiumBorder(),
          shadowColor: Colors.white,
          minimumSize: const Size.fromHeight(60),
        ),
        child: const Text('L O G I N'));
  }