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
Top comments (0)