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

Renan Santos — Sat, 23 Oct 2021 19:06:42 +0000

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,
    ),
)

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,
              ),
            ),
          ],
        ),
      ),
    ],
  ),
)

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,
        ),
      ),
    );
  }
}

Resultado

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

DEV Community: Renan Santos

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

Implementação

Implementação

Resultado

Conclusão