[{"data":1,"prerenderedAt":68},["ShallowReactive",2],{"tutorial-effetti-glassmorphism-in-flutter-con-backdropfilter-e-imagefilter":3,"comments-tutorial-effetti-glassmorphism-in-flutter-con-backdropfilter-e-imagefilter":67},{"id":4,"title":5,"slug":6,"excerpt":7,"intro":8,"cover_image":9,"video_url":10,"difficulty":11,"estimated_minutes":12,"flutter_version":13,"status":14,"published_at":15,"meta_title":16,"meta_description":17,"category":18,"author":22,"steps":24},54,"Effetti glassmorphism in Flutter con BackdropFilter e ImageFilter","effetti-glassmorphism-in-flutter-con-backdropfilter-e-imagefilter","Impara a creare interfacce moderne con effetto vetro smerigliato in Flutter usando BackdropFilter, ImageFilter.blur e ClipRRect per card e barre traslucide.","Il **glassmorphism** è uno stile di design molto diffuso che simula superfici in vetro smerigliato: sfondi sfocati, trasparenze e bordi luminosi. In Flutter possiamo ottenere questo effetto senza pacchetti esterni, sfruttando i widget nativi `BackdropFilter`, `ImageFilter.blur` e `ClipRRect`.\n\nIn questo tutorial costruiremo passo dopo passo una **card in vetro** sovrapposta a un'immagine di sfondo colorata, curando dettagli come sfocatura, opacità e bordi luminosi per un risultato professionale.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Ftutorials\u002F141dc82f-f002-4e62-ae96-882a416872f9.jpg",null,"intermediate",25,"3.x","published","2026-08-05T04:30:49+00:00","Glassmorphism in Flutter con BackdropFilter","Crea effetti vetro smerigliato (glassmorphism) in Flutter con BackdropFilter, ImageFilter.blur e ClipRRect, senza pacchetti esterni.",{"id":19,"name":20,"slug":21},1,"Guide","guide",{"id":19,"name":23},"Flutter Bot",[25,32,39,46,53,60],{"id":26,"position":19,"title":27,"body":28,"code_snippet":29,"code_language":30,"expected_result":31,"demo_url":10,"video_url":10},364,"Preparare lo sfondo colorato","L'effetto glassmorphism ha bisogno di uno **sfondo interessante** dietro cui applicare la sfocatura: senza dettagli visivi il blur non si nota. Creiamo uno `Scaffold` con uno sfondo composto da forme colorate (o un'immagine) usando uno `Stack`.\n\nQui usiamo un gradiente e due cerchi colorati come base.","import 'package:flutter\u002Fmaterial.dart';\n\nclass GlassDemoPage extends StatelessWidget {\n  const GlassDemoPage({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Stack(\n        children: [\n          \u002F\u002F Sfondo con gradiente\n          Container(\n            decoration: const BoxDecoration(\n              gradient: LinearGradient(\n                begin: Alignment.topLeft,\n                end: Alignment.bottomRight,\n                colors: [Color(0xFF6A11CB), Color(0xFF2575FC)],\n              ),\n            ),\n          ),\n          \u002F\u002F Cerchio decorativo 1\n          Positioned(\n            top: 80,\n            left: -40,\n            child: _circle(180, Colors.pinkAccent.withOpacity(0.6)),\n          ),\n          \u002F\u002F Cerchio decorativo 2\n          Positioned(\n            bottom: 120,\n            right: -30,\n            child: _circle(220, Colors.orangeAccent.withOpacity(0.6)),\n          ),\n        ],\n      ),\n    );\n  }\n\n  Widget _circle(double size, Color color) => Container(\n        width: size,\n        height: size,\n        decoration: BoxDecoration(shape: BoxShape.circle, color: color),\n      );\n}","dart","Una schermata con sfondo a gradiente viola-blu e due cerchi colorati sfumati.",{"id":33,"position":34,"title":35,"body":36,"code_snippet":37,"code_language":30,"expected_result":38,"demo_url":10,"video_url":10},365,2,"Applicare la sfocatura con BackdropFilter","Il cuore dell'effetto è `BackdropFilter`, che applica un filtro (in questo caso `ImageFilter.blur`) a **tutto ciò che sta dietro** al suo `child`.\n\nÈ fondamentale racchiudere il `BackdropFilter` in un `ClipRRect` (o `ClipRect`): senza clipping la sfocatura si estenderebbe oltre i bordi del widget, causando artefatti visivi.","import 'dart:ui';\n\nWidget buildGlass() {\n  return ClipRRect(\n    borderRadius: BorderRadius.circular(24),\n    child: BackdropFilter(\n      filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),\n      child: Container(\n        width: 300,\n        height: 200,\n        color: Colors.white.withOpacity(0.15),\n      ),\n    ),\n  );\n}","Un rettangolo semitrasparente che sfoca lo sfondo sottostante, con angoli arrotondati.",{"id":40,"position":41,"title":42,"body":43,"code_snippet":44,"code_language":30,"expected_result":45,"demo_url":10,"video_url":10},366,3,"Aggiungere bordi luminosi e opacità corretta","Per un vero effetto vetro servono tre ingredienti:\n\n- un **colore bianco a bassa opacità** (0.1–0.2) come riempimento\n- un **bordo sottile bianco semitrasparente** che simula il riflesso del vetro\n- un `borderRadius` coerente con il `ClipRRect`\n\nRisistemiamo la card usando un `Container` con `BoxDecoration` completa.","Widget glassCard({required Widget child}) {\n  return ClipRRect(\n    borderRadius: BorderRadius.circular(24),\n    child: BackdropFilter(\n      filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),\n      child: Container(\n        padding: const EdgeInsets.all(24),\n        decoration: BoxDecoration(\n          color: Colors.white.withOpacity(0.15),\n          borderRadius: BorderRadius.circular(24),\n          border: Border.all(\n            color: Colors.white.withOpacity(0.3),\n            width: 1.5,\n          ),\n        ),\n        child: child,\n      ),\n    ),\n  );\n}","Una card in vetro con bordo luminoso e leggera trasparenza bianca.",{"id":47,"position":48,"title":49,"body":50,"code_snippet":51,"code_language":30,"expected_result":52,"demo_url":10,"video_url":10},367,4,"Inserire contenuti dentro la card","Ora aggiungiamo del contenuto testuale e iconografico all'interno della card. Usiamo testo bianco per garantire il contrasto sopra lo sfondo colorato e centriamo la card nello `Stack`.","Widget centeredCard() {\n  return Center(\n    child: SizedBox(\n      width: 320,\n      child: glassCard(\n        child: Column(\n          mainAxisSize: MainAxisSize.min,\n          crossAxisAlignment: CrossAxisAlignment.start,\n          children: const [\n            Icon(Icons.lock_outline, color: Colors.white, size: 40),\n            SizedBox(height: 16),\n            Text(\n              'Accesso sicuro',\n              style: TextStyle(\n                color: Colors.white,\n                fontSize: 22,\n                fontWeight: FontWeight.bold,\n              ),\n            ),\n            SizedBox(height: 8),\n            Text(\n              'I tuoi dati sono protetti con crittografia end-to-end.',\n              style: TextStyle(color: Colors.white70, fontSize: 14),\n            ),\n          ],\n        ),\n      ),\n    ),\n  );\n}","La card in vetro mostra un'icona, un titolo e una descrizione ben leggibili.",{"id":54,"position":55,"title":56,"body":57,"code_snippet":58,"code_language":30,"expected_result":59,"demo_url":10,"video_url":10},368,5,"Comporre il tutto nella pagina","Uniamo lo sfondo del primo passo con la card centrale. Ricorda di importare `dart:ui` per `ImageFilter`. Aggiungiamo la card come ultimo figlio dello `Stack` così da sfocare tutto ciò che sta sotto.","import 'dart:ui';\nimport 'package:flutter\u002Fmaterial.dart';\n\nclass GlassDemoPage extends StatelessWidget {\n  const GlassDemoPage({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Stack(\n        children: [\n          Container(\n            decoration: const BoxDecoration(\n              gradient: LinearGradient(\n                begin: Alignment.topLeft,\n                end: Alignment.bottomRight,\n                colors: [Color(0xFF6A11CB), Color(0xFF2575FC)],\n              ),\n            ),\n          ),\n          Positioned(top: 80, left: -40, child: _circle(180, Colors.pinkAccent.withOpacity(0.6))),\n          Positioned(bottom: 120, right: -30, child: _circle(220, Colors.orangeAccent.withOpacity(0.6))),\n          centeredCard(),\n        ],\n      ),\n    );\n  }\n\n  Widget _circle(double size, Color color) => Container(\n        width: size,\n        height: size,\n        decoration: BoxDecoration(shape: BoxShape.circle, color: color),\n      );\n}","La pagina completa mostra la card in vetro che sfoca lo sfondo colorato dietro di sé.",{"id":61,"position":62,"title":63,"body":64,"code_snippet":65,"code_language":30,"expected_result":66,"demo_url":10,"video_url":10},369,6,"Ottimizzare le prestazioni","`BackdropFilter` è **costoso**: forza la GPU a ricalcolare la sfocatura ad ogni frame. Alcune buone pratiche:\n\n- **Limita l'area sfocata**: sfoca solo la card, non l'intero schermo, mantenendo il `ClipRRect` stretto.\n- **Evita blur animati continui** su widget grandi; se necessari, riduci il `sigma`.\n- Su liste, non applicare `BackdropFilter` a decine di elementi visibili contemporaneamente.\n- Valuta `RepaintBoundary` per isolare i ridisegni.\n- Testa sempre su **dispositivi reali di fascia bassa**, non solo sull'emulatore.\n\nSeguendo queste accortezze otterrai un glassmorphism elegante senza penalizzare la fluidità dell'app.","\u002F\u002F Esempio: isolare il ridisegno della card\nRepaintBoundary(\n  child: glassCard(child: \u002F* ... *\u002F const SizedBox()),\n);","L'effetto vetro rimane fluido anche su dispositivi meno potenti.",[],1785926040562]