{"id":1021,"date":"2025-06-16T11:55:26","date_gmt":"2025-06-16T16:55:26","guid":{"rendered":"https:\/\/80bits.blog\/?p=1021"},"modified":"2025-06-16T11:55:28","modified_gmt":"2025-06-16T16:55:28","slug":"flutter-efecto-cristal-blur-de-un-componente-en-flutter","status":"publish","type":"post","link":"https:\/\/80bits.blog\/index.php\/2025\/06\/16\/flutter-efecto-cristal-blur-de-un-componente-en-flutter\/","title":{"rendered":"Flutter &#8211; Efecto &#8220;Cristal&#8221;\/Blur de un componente en flutter"},"content":{"rendered":"\n<p>Ahora que ya tenemos nuevo UI de <a href=\"https:\/\/www.apple.com\/mx\/newsroom\/2025\/06\/apple-elevates-the-iphone-experience-with-ios-26\/\" target=\"_blank\" rel=\"noopener\" title=\"\">iOS 26<\/a> con efecto cristal, se me ocurrio solo por diversion crear un componente con efecto blur y transparencia en flutter.<\/p>\n\n\n\n<p>Para crear el efecto es bastante sencillo, solo hay que usar el widget <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/BackdropFilter-class.html\" target=\"_blank\" rel=\"noopener\" title=\"\">BackdropFilter<\/a>, se utiliza para aplicar efectos visuales de filtro (como desenfoque) a todo lo que est\u00e9 detr\u00e1s de su hijo en el \u00e1rbol de widgets. Basicamente lo que hace este widget es crear el efecto glassmorphism.<\/p>\n\n\n\n<p>El efecto b\u00e1sicamente se consigue con el efecto de configuraci\u00f3n: <a href=\"https:\/\/api.flutter.dev\/flutter\/dart-ui\/ImageFilter\/ImageFilter.blur.html\" target=\"_blank\" rel=\"noopener\" title=\"\">ImageFilter.blur<\/a><\/p>\n\n\n\n<p>Quedaria como se aprecia en la imagen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"1080\" height=\"2400\" src=\"https:\/\/80bits.blog\/wp-content\/uploads\/2025\/06\/liquidglass_flutter.png\" alt=\"\" class=\"wp-image-1022\" style=\"width:300px\" srcset=\"https:\/\/80bits.blog\/wp-content\/uploads\/2025\/06\/liquidglass_flutter.png 1080w, https:\/\/80bits.blog\/wp-content\/uploads\/2025\/06\/liquidglass_flutter-691x1536.png 691w, https:\/\/80bits.blog\/wp-content\/uploads\/2025\/06\/liquidglass_flutter-922x2048.png 922w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3digo<\/h2>\n\n\n\n<p>El c\u00f3digo es muy sencillo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'dart:ui';\nimport 'package:flutter\/material.dart';\n\nclass AeroContainer extends StatelessWidget {\n  final Widget child;\n  final VoidCallback onTap;\n\n  const AeroContainer({super.key,required this.child, required this.onTap});\n\n  @override\n  Widget build(BuildContext context) {\n    return ClipRRect(\n      borderRadius: BorderRadius.circular(30),\n      child: BackdropFilter(\n        filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),\n        child: Material(\n          color: Colors.white.withValues(alpha: 0.1),\n          child: InkWell(\n            onTap: onTap,\n            child: Container(\n              height: 50,\n              padding: const EdgeInsets.symmetric(horizontal: 16),\n              decoration: BoxDecoration(\n                borderRadius: BorderRadius.circular(30),\n                border: Border.all(color: Colors.white),\n              ),\n              child: child,\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>El widget en mi ejemplo se puede mover libremente para apreciar mejor el efecto, esa logica esta en el main y es sencilla de implementar.<\/p>\n\n\n\n<figure style=\"width: 100%; max-width: 400px; height: auto;\" class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/80bits.blog\/wp-content\/uploads\/2025\/06\/liquidglass_flutter_animate.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p><a href=\"https:\/\/github.com\/genitalico\/frutiger_aero\" target=\"_blank\" rel=\"noopener\" title=\"\">Codigo en Github<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ahora que ya tenemos nuevo UI de iOS 26 con efecto cristal, se me ocurrio solo por diversion crear un componente con efecto blur y transparencia en flutter. Para crear el efecto es bastante sencillo, solo hay que usar el widget BackdropFilter, se utiliza para aplicar efectos visuales de filtro (como desenfoque) a todo lo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1030,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10,23,22,11],"tags":[],"class_list":["post-1021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-flutter","category-frameworks","category-ios"],"jetpack_featured_media_url":"https:\/\/80bits.blog\/wp-content\/uploads\/2025\/06\/flutter_pet_glass.jpg","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts\/1021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/comments?post=1021"}],"version-history":[{"count":7,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts\/1021\/revisions"}],"predecessor-version":[{"id":1031,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/posts\/1021\/revisions\/1031"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/media\/1030"}],"wp:attachment":[{"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/media?parent=1021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/categories?post=1021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/80bits.blog\/index.php\/wp-json\/wp\/v2\/tags?post=1021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}