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)

#flutter #flutterdev #creditcard #glassmorphism

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)