DEV Community

Cover image for Criando um cartão de crédito estilo Glassmorphism(vidro fosco)
Renan Santos
Renan Santos

Posted on

Criando um cartão de crédito estilo Glassmorphism(vidro fosco)

Nesse primeiro posto vamos criar um cartão com um efeito Glassmorphism, ou efeito de vidro fosco

Implementação

Você vai criar um widget BackdropFilter.
De acordo com a documentação, BackdropFilter é

Um widget que aplica um filtro ao conteúdo pintado existente e, em seguida, pinta o child.

O filtro será aplicado a toda a área dentro do clipe do widget pai ou ancestral. Se não houver clip, o filtro será aplicado em tela inteira.

Adicione o import 'dart:ui';, para importar o ImageFilter.blur(sigmaX: 8, sigmaY: 16) ele cria um filtro de imagem que aplica um desfoque gaussiano. Vamos adicionar um LinearGradient no decoration do Container:

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 8, sigmaY: 16),
    child: Container(
      decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.grey.withAlpha(20),
                Colors.grey.withAlpha(20),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: const BorderRadius.all(
              Radius.circular(20),
            ),
            border: Border.all(
              width: 1.5,
              color: Colors.white.withAlpha(20),
            ),
          ),
        child: child,
    ),
)
Enter fullscreen mode Exit fullscreen mode

Pronto, temos o efeito vidro fosco! 🎉

Agora vamos criar o widget de Cartão de crédito, e adicionar ele como child no Container que criamos acima.

Implementação

Container(
  padding: const EdgeInsets.all(8),
  height: 220,
  width: double.infinity,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(
              left: 16,
              top: 32,
            ),
            child: Row(
              children: [
                Image.asset(
                  'assets/images/chip.png',
                  scale: 1,
                ),
                const SizedBox(width: 12),
                Image.asset(
                  'assets/images/nfc.png',
                  height: 22,
                  color: Colors.white,
                  scale: 1,
                ),
              ],
            ),
          ),
          const Spacer(),
          Align(
            alignment: Alignment.topRight,
            child: Image.asset(
              'assets/images/mastercard.png',
              height: 48,
            ),
          ),
        ],
      ),
      const Spacer(),
      Padding(
        padding: const EdgeInsets.only(left: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text(
              '4111 1111 1111 1111',
              style: TextStyle(
                fontSize: 20,
                color: Colors.white,
                fontWeight: FontWeight.w600,
                letterSpacing: 2,
              ),
            ),
            SizedBox(height: 20),
            Text(
              'John Doe',
              style: TextStyle(
                fontSize: 16,
                color: Colors.white,
                fontWeight: FontWeight.w600,
                letterSpacing: 1.5,
              ),
            ),
          ],
        ),
      ),
    ],
  ),
)
Enter fullscreen mode Exit fullscreen mode

Código completo:

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class CardScreen extends StatelessWidget {
  const CardScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    return Scaffold(
      body: Stack(
        children: [
          Image.asset(
            'assets/images/background1.jpeg',
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Center(
              child: GlassContainer(
                child: Container(
                  padding: const EdgeInsets.all(8),
                  height: 220,
                  width: double.infinity,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(
                              left: 16,
                              top: 32,
                            ),
                            child: Row(
                              children: [
                                Image.asset(
                                  'assets/images/chip.png',
                                  scale: 1,
                                ),
                                const SizedBox(width: 12),
                                Image.asset(
                                  'assets/images/nfc.png',
                                  height: 22,
                                  color: Colors.white,
                                  scale: 1,
                                ),
                              ],
                            ),
                          ),
                          const Spacer(),
                          Align(
                            alignment: Alignment.topRight,
                            child: Image.asset(
                              'assets/images/mastercard.png',
                              height: 48,
                            ),
                          ),
                        ],
                      ),
                      const Spacer(),
                      Padding(
                        padding: const EdgeInsets.only(left: 16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: const [
                            Text(
                              '4111 1111 1111 1111',
                              style: TextStyle(
                                fontSize: 20,
                                color: Colors.white,
                                fontWeight: FontWeight.w600,
                                letterSpacing: 2,
                              ),
                            ),
                            SizedBox(height: 20),
                            Text(
                              'John Doe',
                              style: TextStyle(
                                fontSize: 16,
                                color: Colors.white,
                                fontWeight: FontWeight.w600,
                                letterSpacing: 1.5,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class GlassContainer extends StatelessWidget {
  const GlassContainer({
    Key? key,
    required this.child,
  }) : super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 8, sigmaY: 16),
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.grey.withAlpha(20),
                Colors.grey.withAlpha(20),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: const BorderRadius.all(
              Radius.circular(20),
            ),
            border: Border.all(
              width: 1.5,
              color: Colors.white.withAlpha(20),
            ),
          ),
          child: child,
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Resultado

Image description

Conclusão

Neste artigo, criamos um cartão com efeito Glassmorphism, estilo vidro fosco, que você pode modificar e experimentar de acordo com o seu.
Espero que este blog forneça informações suficientes sobre como experimentar esse efeito em seu projeto de flutter. Mostrei a você o que é o efeito Glassmorphism em Flutter, criando um cartão de crédito com esse efeito, então, por favor, experimente.
Link do repositório glassmorphism_card

Top comments (0)