Design Glass Morphism 로그인

1 맨아래 버튼은 적용 안해도 되며 . 그래도 코드는 맨아래에 작성 .

2  이미지는 픽사베이 링크 networImage

3

4 home

late TextEditingController emailController;
  late TextEditingController passwordController;

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

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

  bool isSwitch = false;
  //
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const ADrawer(),
      appBar: AppBar(title: const Text('Glass Morphism')),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        decoration: const BoxDecoration(
          image: DecorationImage(
              image: NetworkImage('https://cdn.pixabay.com/photo/2016/03/27/16/40/window-1283073_640.jpg'),
              fit: BoxFit.cover),
        ),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(20,10,20,10),
          child: Column(
            children: [
              _iconTop(),
              const SizedBox(height: 50),
              _inputField('email', emailController),
              const SizedBox(height: 20),
              _inputField('Password', passwordController, isPassword: true),
              const SizedBox(height: 50),
              _loginButton(),
              const SizedBox(height: 50),

              Center(
                // center로 감사야 전체화면이 안됨
                child: InkWell(
                  onTap: () {
                    setState(() {
                      if (isSwitch)
                        isSwitch = !isSwitch;
                      else
                        isSwitch = true;
                    });
                  },
                  child: SizedBox(
                      height: 100,
                      width: 300,
                      child: CustomGlassButton(
                          isPressed: isSwitch,
                          child: Text(isSwitch ? 'ON' : 'OFF', style: TextStyle(fontSize: 75, color: Colors.white54)))),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _iconTop() {
    return Container(
     decoration: BoxDecoration(border: Border.all(color: Colors.white70, width: 2), shape: BoxShape.circle),
     child: const Icon(Icons.person, color: Colors.white70, size: 120),
    );
  }

  Widget _inputField(String hintText, TextEditingController controller, {isPassword = false}) {
    var border = OutlineInputBorder(
        borderRadius: BorderRadius.circular(18), borderSide: const BorderSide(color: Colors.white70));
    return TextField(
      style: const TextStyle(color: Colors.white70),
      controller: controller,
      decoration: InputDecoration(
        hintText: hintText,
        hintStyle: const TextStyle(color: Colors.white70),
        enabledBorder: border,
        focusedBorder: border,
      ),
    );
  }

  Widget _loginButton() {
    return ElevatedButton(
        onPressed: () {},
        child: const SizedBox(
          width: double.infinity,
          child: Text(
            'Log in',
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          ),
        ),
        style: ElevatedButton.styleFrom(
            shape: const StadiumBorder(),
            primary: Colors.white70,
            onPrimary: Colors.blueGrey,
            padding: const EdgeInsets.symmetric(vertical: 16)));
  }
}

---

5 Custom Glass Button

import 'dart:ui';

import 'package:flutter/material.dart';

class CustomGlassButton extends StatelessWidget {
  final bool isPressed;
  final Widget child;
  const CustomGlassButton({super.key, required this.isPressed, required this.child});

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(25),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white.withOpacity(isPressed ? 0.3 : 0.1),
              borderRadius: BorderRadius.circular(25),
              border: Border.all(width: 3, color: Colors.white24),
              boxShadow: [
                BoxShadow(
                  blurRadius: 30,
                  color: Colors.black.withOpacity(0.1),
                  spreadRadius: -4,
                )
              ]),
          child: Center(child: child),
        ),
      ),
    );
  }
}