[{"data":1,"prerenderedAt":23},["ShallowReactive",2],{"articolo-widget-adattivi-in-flutter-creare-ui-native-con-cupertino-e-adaptive-widgets":3,"comments-article-widget-adattivi-in-flutter-creare-ui-native-con-cupertino-e-adaptive-widgets":22},{"id":4,"title":5,"slug":6,"excerpt":7,"body":8,"cover_image":9,"video_url":10,"status":11,"published_at":12,"meta_title":13,"meta_description":14,"category":15,"author":19},45,"Widget adattivi in Flutter: creare UI native con Cupertino e adaptive widgets","widget-adattivi-in-flutter-creare-ui-native-con-cupertino-e-adaptive-widgets","Come costruire interfacce che rispettano le convenzioni di iOS e Android usando i widget adattivi di Flutter, il pacchetto Cupertino e strategie di platform detection.","## Perché puntare sui widget adattivi\n\nUno dei punti di forza di Flutter è la possibilità di scrivere una sola base di codice per più piattaforme. Tuttavia, un'app che presenta esattamente la stessa UI Material su iOS può risultare fuori posto agli occhi degli utenti Apple, abituati a controlli, transizioni e comportamenti diversi. I **widget adattivi** permettono di rispettare le convenzioni della piattaforma senza duplicare l'intera interfaccia.\n\nIn questo articolo vediamo come sfruttare i costruttori `.adaptive`, i widget Cupertino e una strategia di platform detection pulita.\n\n## Costruttori .adaptive integrati\n\nFlutter offre alcuni widget che cambiano automaticamente aspetto in base alla piattaforma. Il più noto è `Switch.adaptive`, ma esistono anche altri.\n\n```dart\n\u002F\u002F Mostra uno switch in stile iOS su Apple, Material altrove\nSwitch.adaptive(\n  value: isEnabled,\n  onChanged: (value) => setState(() => isEnabled = value),\n);\n\n\u002F\u002F Indicatore di caricamento adattivo\nconst CircularProgressIndicator.adaptive();\n\n\u002F\u002F Slider adattivo\nSlider.adaptive(\n  value: volume,\n  onChanged: (v) => setState(() => volume = v),\n);\n```\n\nAnche `Checkbox.adaptive` e `Radio.adaptive` sono disponibili nelle versioni recenti di Flutter. Questi costruttori sono il modo più rapido per introdurre adattività senza scrivere logica condizionale.\n\n## Il pacchetto Cupertino\n\nQuando i costruttori `.adaptive` non bastano, si può ricorrere direttamente ai widget Cupertino, che replicano fedelmente i componenti iOS.\n\n```dart\nimport 'package:flutter\u002Fcupertino.dart';\n\nCupertinoButton(\n  color: CupertinoColors.activeBlue,\n  onPressed: () {},\n  child: const Text('Conferma'),\n);\n\n\u002F\u002F Un dialog in stile iOS\nshowCupertinoDialog(\n  context: context,\n  builder: (context) => CupertinoAlertDialog(\n    title: const Text('Attenzione'),\n    content: const Text('Vuoi davvero eliminare l\\'elemento?'),\n    actions: [\n      CupertinoDialogAction(\n        isDestructiveAction: true,\n        onPressed: () => Navigator.pop(context),\n        child: const Text('Elimina'),\n      ),\n      CupertinoDialogAction(\n        onPressed: () => Navigator.pop(context),\n        child: const Text('Annulla'),\n      ),\n    ],\n  ),\n);\n```\n\n## Platform detection pulita\n\nPer decidere quale widget mostrare, evita di usare `dart:io` con `Platform.isIOS` sparso ovunque: non funziona su web e rende il codice difficile da testare. Meglio centralizzare la logica.\n\n```dart\nimport 'package:flutter\u002Ffoundation.dart';\n\nbool get isApplePlatform {\n  return defaultTargetPlatform == TargetPlatform.iOS ||\n      defaultTargetPlatform == TargetPlatform.macOS;\n}\n```\n\nUsare `defaultTargetPlatform` da `package:flutter\u002Ffoundation.dart` è preferibile perché è sicuro anche su Flutter Web e può essere sovrascritto nei test tramite `debugDefaultTargetPlatformOverride`.\n\n## Creare un widget adattivo personalizzato\n\nMettiamo insieme i concetti creando un pulsante che si adatta alla piattaforma.\n\n```dart\nimport 'package:flutter\u002Fcupertino.dart';\nimport 'package:flutter\u002Fmaterial.dart';\n\nclass AdaptiveButton extends StatelessWidget {\n  const AdaptiveButton({\n    super.key,\n    required this.label,\n    required this.onPressed,\n  });\n\n  final String label;\n  final VoidCallback onPressed;\n\n  @override\n  Widget build(BuildContext context) {\n    final isApple = defaultTargetPlatform == TargetPlatform.iOS ||\n        defaultTargetPlatform == TargetPlatform.macOS;\n\n    if (isApple) {\n      return CupertinoButton.filled(\n        onPressed: onPressed,\n        child: Text(label),\n      );\n    }\n\n    return FilledButton(\n      onPressed: onPressed,\n      child: Text(label),\n    );\n  }\n}\n```\n\n## Adattare la struttura delle pagine\n\nAnche la scaffold di base cambia tra le piattaforme. Su iOS si usa `CupertinoPageScaffold` con `CupertinoNavigationBar`, mentre su Android `Scaffold` con `AppBar`.\n\n```dart\nWidget buildScaffold(BuildContext context, Widget body) {\n  if (isApplePlatform) {\n    return CupertinoPageScaffold(\n      navigationBar: const CupertinoNavigationBar(\n        middle: Text('Profilo'),\n      ),\n      child: SafeArea(child: body),\n    );\n  }\n  return Scaffold(\n    appBar: AppBar(title: const Text('Profilo')),\n    body: body,\n  );\n}\n```\n\n## Best practice\n\n- **Non esagerare**: adatta solo i componenti dove la differenza è percepibile (pulsanti, dialog, switch, navigazione). Un'app coerente col brand può mantenere gran parte dell'UI condivisa.\n- **Testa su entrambe le piattaforme**: usa `debugDefaultTargetPlatformOverride` per verificare l'aspetto senza cambiare dispositivo.\n- **Considera i pacchetti community**: `flutter_platform_widgets` offre widget già adattivi e riduce il boilerplate, ma valuta il costo in termini di dipendenze.\n- **Attenzione al web e al desktop**: `defaultTargetPlatform` restituisce valori sensati anche lì, ma decidi consapevolmente quale stile preferire.\n\n## Conclusione\n\nI widget adattivi permettono di offrire un'esperienza che rispetta le aspettative degli utenti su ogni piattaforma senza sacrificare la codebase unica di Flutter. Iniziando dai costruttori `.adaptive`, passando ai widget Cupertino e centralizzando la platform detection, si ottiene un'app che appare nativa ovunque, mantenendo il codice pulito e testabile.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002F70998855-a25a-436d-b03d-bc3ba3dfd1bf.jpg",null,"published","2026-07-19T04:00:37+00:00","Widget adattivi in Flutter: UI native iOS e Android","Guida ai widget adattivi in Flutter: costruttori .adaptive, Cupertino e platform detection per creare UI native su iOS e Android da una sola codebase.",{"id":16,"name":17,"slug":18},3,"Best practice","best-practice",{"id":20,"name":21},1,"Flutter Bot",[],1785219600654]