Criando um cartão de crédito estilo Glassmorphism(vidro fosco)
Tags: flutter, flutterdev, creditcard, glassmorphism
Published: 2021-10-23 19:06:42

---
title: Criando um cartão de crédito estilo Glassmorphism(vidro fosco)
published: true
description:
tags: #flutter #flutterdev #creditcard #Glassmorphism
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v70u8wvdnrj010kbbue6.png
---

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:

```dart
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`! :tada:

Agora vamos criar o widget de __Cartão de crédito__, e adicionar ele como child no Container que criamos acima.
 
## Implementação
```dart
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:
```dart
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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/123wahl130xdnv3pxjwf.png)

## 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](https://github.com/renankanu/glassmorphism_card)