Hallo! Ik ben

Federico Calò

Sviluppatore Software | Divulgatore Tecnico

Creo applicazioni web moderne e strumenti digitali personalizzati per aiutare le attività a crescere attraverso l'innovazione tecnologica. La mia passione è unire informatica ed economia per generare valore reale.

Neem Contact Op

Over Mij

La mia passione per l'informatica è nata tra i banchi dell'Istituto Tecnico Commerciale di Maglie, dove ho scoperto il potere della programmazione e il fascino di creare soluzioni digitali. Fin da subito, ho capito che l'informatica non era solo codice, ma uno strumento straordinario per trasformare idee in realtà.

Durante gli studi superiori in Sistemi Informativi Aziendali, ho iniziato a intrecciare informatica ed economia, comprendendo come la tecnologia possa essere il motore della crescita per qualsiasi attività. Questa visione mi ha accompagnato all'Università degli Studi di Bari, dove ho conseguito la Laurea in Informatica, approfondendo le mie competenze tecniche e la mia passione per lo sviluppo software.

Oggi metto questa esperienza al servizio di imprese, professionisti e startup, creando soluzioni digitali su misura che automatizzano processi, ottimizzano risorse e aprono nuove opportunità di business. Perché la vera innovazione inizia quando la tecnologia incontra le esigenze reali delle persone.

Mijn Vaardigheden

Analisi Dati & Modelli Previsionali

Trasformo i dati in insights strategici con analisi approfondite e modelli predittivi per decisioni informate

Procesautomatisering

Creo strumenti personalizzati che automatizzano operazioni ripetitive e liberano tempo per attività a valore aggiunto

Maatwerksystemen

Sviluppo sistemi software su misura, dalle integrazioni tra piattaforme alle dashboard personalizzate

const federico = {
  nome: "Federico Calò",
  ruolo: "Sviluppatore Software",
  città: "Bari, Italia",
  missione: "Aiutare attraverso l'informatica",
  passioni: [
    "Codice Pulito",
    "Innovazione",
    "Crescita Continua"
  ]
};

Mijn Missie

Credo fermamente che l'informatica sia lo strumento più potente per trasformare le idee in realtà e migliorare la vita delle persone.

Technologie Democratiseren

La mia missione è rendere l'informatica accessibile a tutti: dalle piccole imprese locali alle startup innovative, fino ai professionisti che vogliono digitalizzare la propria attività. Ogni realtà merita di sfruttare le potenzialità del digitale.

IT en Business Verenigen

Non è solo questione di scrivere codice: è capire come la tecnologia possa generare valore reale. Intrecciando competenze informatiche e visione economica, aiuto le attività a crescere, ottimizzare processi e raggiungere nuovi traguardi di efficienza e redditività.

Maatwerkoplossingen Creëren

Ogni attività è unica, e così devono esserlo le soluzioni. Sviluppo strumenti personalizzati che rispondono alle esigenze specifiche di ciascun cliente, automatizzando processi ripetitivi e liberando tempo per ciò che conta davvero: far crescere il business.

Transformeer Uw Bedrijf met Technologie

Che tu gestisca un negozio, uno studio professionale o un'azienda, posso aiutarti a sfruttare le potenzialità dell'informatica per lavorare meglio, più velocemente e in modo più intelligente.

Laten We Praten →

Unisciti alla Community

Entra nella community di sviluppatori dove discutiamo di software, AI, architettura e DevOps. Condividi idee, fai domande e cresci insieme a noi.

Canale

FC Dev Blog

Ricevi notifiche su nuovi articoli, serie complete, tips settimanali e tool in evidenza. Contenuti bilingui IT/EN direttamente nel tuo Telegram.

Nuovi articoli appena pubblicati
Tips e code snippets settimanali
Sondaggi sugli argomenti futuri

Iscriviti al Canale

Gruppo

FC Dev Community

Una community bilingue IT/EN per sviluppatori. Discussioni, Q&A, aiuto reciproco e networking con altri professionisti del settore.

Discussioni su articoli e tecnologie
Help coding e code review
Opportunità di lavoro e collaborazione

Unisciti al Gruppo

Topic di Discussione

Visualizza

Master SQL

RoadMap.sh

Novembre 2024

Visualizza

Oracle Certified Foundations Associate

Oracle

Ottobre 2024

Visualizza

People Leadership Credential

Connect

Settembre 2024

Linguaggi & Tecnologie

Java

Python

JavaScript

Angular

React

TypeScript

SQL

PHP

CSS/SCSS

Node.js

Docker

Git

💼

12/2024 - Presente

Custom Software Engineering Analyst

Accenture

Bari, Puglia, Italia · Ibrida Analisi e sviluppo di sistemi informatici attraverso l'utilizzo di Java e Quarkus in Health and Public Sector. Formazione continua su tecnologie moderne per la creazione di soluzioni software personalizzate ed efficienti e sugli agenti.

💼

06/2022 - 12/2024

Analista software e Back End Developer Associate Consultant

Links Management and Technology SpA

Esperienza nell'analisi di sistemi software as-is e flussi ETL utilizzando PowerCenter. Formazione completata su Spring Boot per lo sviluppo di applicazioni backend moderne e scalabili. Sviluppatore Backend specializzato in Spring Boot, con esperienza in progettazione di database, analisi, sviluppo e testing dei task assegnati.

💼

02/2021 - 10/2021

Programmatore software

Adesso.it (prima era WebScience srl)

Esperienza nell'analisi AS-IS e TO-BE, evoluzioni SEO ed evoluzioni website per migliorare le performance e l'engagement degli utenti.

🎓

2018 - 2025

Laurea in Informatica

Università degli Studi di Bari Aldo Moro

Bachelor's degree in Computer Science, focusing on software engineering, algorithms, and modern development practices.

📚

2013 - 2018

Diploma - Sistemi Informativi Aziendali

Istituto Tecnico Commerciale di Maglie

Technical diploma specializing in Business Information Systems, combining IT knowledge with business management.

Neem Contact Op

Heeft u een project in gedachten? Laten we praten! Vul het formulier in en ik reageer snel.

* Campi obbligatori. I tuoi dati saranno utilizzati solo per rispondere alla tua richiesta.

Flutter Internals: begrijp het raamwerk voor het schrijven van betere code

Flutter is gebouwd op drie parallelle en gesynchroniseerde bomen van de ontwikkelaars kent hij nooit rechtstreeks, maar toch bepalen zij elk aspect de prestaties en het gedrag van de app. Het begrijpen van de Widget-bomen, deElementenbomen en de RenderObjectboom transformeer de weg waar je Flutter-code schrijft: leg uit waarom const en een overwinningsprestatie, waarom setState en lokaal, omdat InheritedWidget gegevens doorgeeft zonder opnieuw op te bouwen nutteloos en omdat GlobalKey gevaarlijk is.

Dit artikel is niet theoretisch: elk concept gaat vergezeld van praktijkvoorbeelden echte implicaties voor prestaties en architectuur. Aan het einde kun je nadenken over wat het gebeurt echt wanneer Flutter een kader tekent.

Wat je gaat leren

De drie Flutter-bomen: Widget, Element en RenderObject
Omdat widgets onveranderlijk zijn en elk frame opnieuw worden opgebouwd
Hoe Element de levenscyclus en status beheert
Het verzoeningsproces: hoe Flutter verschillen tussen frames vindt
Waarom const widget vermijdt het opnieuw opbouwen van de Elementenboom
Als setState markeert alleen de subboom die verandert
InheritedWidget: gegevenspropagatie zonder trapsgewijze herbouw
Lay-outpas: beperkingen kleiner, maten groter, posities tijdens het schilderen
RepaintBoundary: isoleer de herschilderzones

De drie bomen van flutter

Wanneer u een Flutter-widget schrijft, beschrijft u de gebruikersinterface declaratief. Flutter neemt die beschrijving en bouwt intern drie verschillende datastructuren met verschillende verantwoordelijkheden. Deze scheiding vormt de basis van Flutters optreden.

Boom	Veranderlijkheid	Verantwoordelijkheid	Duur
Widget-bomen	Onveranderlijk	UI-configuratiebeschrijving	Kort (bij elke build opnieuw opgebouwd)
Elementenbomen	Veranderlijk	Levenscyclus, staat, verzoening	Lang (blijft bestaan tussen herbouwingen)
RenderObjectboom	Veranderlijk	Lay-out, hittesten, schilderen	Lang (lui bijgewerkt)

Widgetboom: de onveranderlijke beschrijving

Een Widget in Flutter en een onveranderlijke configuratie: beschrijft hoe een deel van de gebruikersinterface zou moeten verschijnen, maar het bevat geen status of weergave. Elke keer dat je belt build(), Flutter maakt nieuwe Widget-objecten — economische werking omdat Widgets eenvoudigweg configuratieobjecten zijn op de hoop en onmiddellijk kandidaten voor afvalinzameling.

# Dimostrazione: Widget = configurazione immutabile

// Questo codice crea nuovi oggetti Widget ogni frame di build:
class CounterWidget extends StatefulWidget {
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    // build() restituisce un NUOVO oggetto Text ogni volta che viene chiamato
    // Ma Flutter NON ricrea il RenderObject corrispondente ogni volta
    // Controlla invece se la configurazione e "uguale" tramite il type + key
    return Column(
      children: [
        // NUOVO oggetto Text creato ogni build, ma efficiente:
        Text('Count: $_count'),  // runtimeType: Text
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Increment'),  // const: NON ricrea il Widget
        ),
      ],
    );
  }
}

// const Text('Increment') e allocato UNA SOLA VOLTA in memoria
// come costante compile-time. Ogni rebuild del parent usa lo stesso oggetto.
// Questo e il motivo per cui flutter lint raccomanda sempre const.

Elementboom: de levenscyclusmanager

De Elementenboom is het hart van het Flutter-framework. Elk knooppunt van de elementenboom komt overeen met een widget in de boom, maar blijft bestaan tijdens het opnieuw opbouwen. Het Element weet het de huidige Widget, beheert de status (via StatefulElement) en beslist of u het RenderObject wilt bijwerken of een nieuw object wilt maken.

# Il processo di reconciliation (diffing) di Flutter

// Scenario: aggiorno il type di un widget in una lista
// PRIMA del rebuild:
Column(
  children: [
    Text('Hello'),        // Element: TextElement
    Icon(Icons.star),     // Element: LeafRenderObjectElement
  ],
)

// DOPO il rebuild:
Column(
  children: [
    Text('Hello'),        // stesso type -> Flutter RIUSA l'Element
    ElevatedButton(       // type diverso -> Flutter DISTRUGGE vecchio Element
      onPressed: () {},   //                e CREA nuovo Element (e RenderObject)
      child: const Text('OK'),
    ),
  ],
)

// La regola: Flutter fa il match degli Element per POSIZIONE e TIPO (+ Key se presente)
// Se type corrisponde: aggiorna la configurazione dell'Element esistente
// Se type non corrisponde: distrugge il vecchio Element e crea tutto da zero

// IMPLICAZIONE: le liste dinamiche DEVONO usare Key
// SENZA Key (SBAGLIATO):
ListView.builder(
  itemBuilder: (context, index) => ListTile(
    title: Text(items[index].name),  // no key!
  ),
)
// Se riordini la lista, Flutter puo assegnare lo stato sbagliato agli item

// CON Key (CORRETTO):
ListView.builder(
  itemBuilder: (context, index) => ListTile(
    key: ValueKey(items[index].id),  // chiave unica e stabile
    title: Text(items[index].name),
  ),
)

StatefulWidget: waar de staat leeft

Een van de meest gestelde vragen van nieuwe Flutter-ontwikkelaars is: "waarom de staat gaat het niet verloren als de widget opnieuw wordt opgebouwd?". Het antwoord ligt in de Elementenboom: de staat leeft in het Element (specifiek in StatefulElement), niet in de Widget.

# Perche lo stato persiste tra rebuild

// StatefulWidget: Widget (immutabile) + State (mutabile)
class MyWidget extends StatefulWidget {
  const MyWidget({super.key, required this.title});
  final String title;  // configurazione immutabile

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  // LO STATO VIVE QUI, nell'oggetto State
  // L'Element tiene un riferimento a questo State
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    // Il Widget (MyWidget) viene ricreato, ma _MyWidgetState persiste
    // L'Element aggiorna il suo _widget (la nuova configurazione)
    // ma mantiene il suo _state (il vecchio State)
    return Text('${widget.title}: $_counter');
    // widget.title viene aggiornato automaticamente dall'Element
    // quando il parent ricostruisce con un nuovo title
  }
}

// Lifecycle completo di StatefulElement:
// 1. Element.mount()     -> State.initState()
// 2. Element.update()    -> State.didUpdateWidget() (se widget parent ricostruisce)
// 3. Element.deactivate() -> State.deactivate() (rimosso temporaneamente dal tree)
// 4. Element.unmount()   -> State.dispose()        (rimosso definitivamente)

// IMPORTANTE: dispose() DEVE liberare tutte le risorse
// (AnimationController, StreamSubscription, TextEditingController, etc.)
@override
void dispose() {
  _controller.dispose();     // AnimationController
  _subscription.cancel();    // StreamSubscription
  _textController.dispose(); // TextEditingController
  super.dispose();
}

RenderObjectboom: lay-out en schilderen

De RenderObject-boom is het niveau dat het dichtst bij het metaal ligt: het beheert de lay-out (berekening van posities en maten), hittesten (welke widget reageert op aanraking) en schilderen (tekenen op canvas). Vergeleken met de Element-boom, de RenderObject-boom het wordt alleen bijgewerkt wanneer dat nodig is, en de updates zijn incrementeel.

# Il Layout pass: constraints down, sizes up, positions during paint

// Flutter usa un sistema di constraint-based layout:
// 1. Il parent passa CONSTRAINTS al child (max/min width/height)
// 2. Il child calcola la sua SIZE all'interno dei constraints
// 3. Il parent posiziona il child durante il paint

// Esempio: come Column calcola il layout
Column(
  children: [
    // 1. Column passa: BoxConstraints(maxWidth: 390, maxHeight: infinity)
    Text('Hello'),
    // Text risponde: "ho bisogno di 40px height"
    // 2. Column passa constraints rimanenti al secondo child
    Expanded(
      // Expanded usa TUTTA l'altezza rimanente
      child: ListView(...),
    ),
  ],
)

// RepaintBoundary: isola una zona dal ciclo di repaint
// Usalo per widget che si aggiornano spesso e non devono
// far ridisegnare il resto della UI
RepaintBoundary(
  child: AnimatedProgressBar(progress: _progress),
)

// Senza RepaintBoundary: ogni frame del progressbar ridisegna tutta la pagina
// Con RepaintBoundary: solo il progressbar viene ridisegnato ogni frame

// CustomPainter con shouldRepaint ottimizzato:
class ChartPainter extends CustomPainter {
  const ChartPainter({required this.data, required this.color});
  final List<double> data;
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    // ... codice di disegno
  }

  @override
  bool shouldRepaint(ChartPainter oldDelegate) {
    // Ridisegna SOLO se i dati o il colore sono cambiati
    // Confronto reference per le liste (usa listEquals per confronto profondo)
    return oldDelegate.data != data || oldDelegate.color != color;
  }
}

const Widget: de verkeerd begrepen prestatiewinst

Het trefwoord const op een widget is niet alleen een stilistische voorkeur: en een fundamentele optimalisatie die afstemmingswerk in de elementenboom elimineert.

# const: perche e una performance win concreta

// SENZA const: ogni build() del parent crea nuovi oggetti
class ParentWidget extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // NUOVO oggetto Text creato ogni rebuild del parent
        // Flutter deve fare il confronto nell'Element tree
        Text('Static label'),
        // widget che cambia davvero
        Text('Dynamic: $_counter'),
      ],
    );
  }
}

// CON const: Flutter usa lo stesso oggetto compile-time
class ParentWidget extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Stesso oggetto compile-time, NESSUN confronto nell'Element tree
        const Text('Static label'),
        // Solo questo widget causa lavoro all'Element tree
        Text('Dynamic: $_counter'),
      ],
    );
  }
}

// La regola: const rende il Widget una "costante compile-time"
// L'Element tree vede che il Widget e identico (stesso riferimento in memoria)
// e salta completamente la fase di reconciliation per quel sottoalbero

// flutter lint: "prefer_const_constructors" ti dice dove aggiungere const
// flutter analyze conta quante opportunita stai perdendo

InheritedWidget: efficiënte gegevensverspreiding

InheritedWidget is het mechanisme waarmee Flutter gegevens door de boom verspreidt zonder dat er parameters door elke laag hoeven te worden doorgegeven. En de basis van Theme, MediaQuery, Navigator en Riverpod zelf.

# InheritedWidget: come funziona internamente

// Implementazione manuale (come funziona Theme, MediaQuery, etc.)
class AppConfig extends InheritedWidget {
  const AppConfig({
    super.key,
    required this.apiBaseUrl,
    required this.isDarkMode,
    required super.child,
  });

  final String apiBaseUrl;
  final bool isDarkMode;

  // Metodo statico per accedere dal tree discendente
  static AppConfig of(BuildContext context) {
    final config = context.dependOnInheritedWidgetOfExactType<AppConfig>();
    assert(config != null, 'AppConfig non trovato nel tree');
    return config!;
  }

  // CRITICO: updateShouldNotify decide quali widget discendenti si ricostruiscono
  // Restituisci TRUE solo se il dato e davvero cambiato
  @override
  bool updateShouldNotify(AppConfig oldWidget) {
    return apiBaseUrl != oldWidget.apiBaseUrl ||
           isDarkMode != oldWidget.isDarkMode;
  }
}

// Utilizzo: qualsiasi widget discendente puo accedere ad AppConfig
class SomeDeepWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // context.dependOnInheritedWidgetOfExactType registra questo widget
    // come "dipendente" da AppConfig: si ricostruira quando AppConfig cambia
    final config = AppConfig.of(context);

    return Text(config.isDarkMode ? 'Dark Mode' : 'Light Mode');
  }
}

// DIFFERENZA IMPORTANTE:
// context.dependOnInheritedWidgetOfExactType -> si iscrive agli update (rebuild)
// context.getInheritedWidgetOfExactType      -> legge senza iscriversi (no rebuild)

// Questa distinzione e il motivo per cui:
// Theme.of(context)       -> causa rebuild quando il tema cambia
// Theme.of(context).colors -> stesso effetto, non filtra per sub-proprieta

setState: Lokaal bereik en waarom is efficiënt

# setState: marca solo il sottoalbero necessario

// setState non "ricostruisce tutta l'app" - marca solo l'Element di QUESTO State
// come "dirty" nella lista dei widget da rebuildarsi nel prossimo frame

class CounterPage extends StatefulWidget {
  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar non dipende da _count -> NON si ricostruisce
      appBar: const AppBar(title: Text('Counter')),
      body: Center(
        // SOLO questo Text si ricostruisce (il suo Element viene marcato dirty)
        child: Text('$_count'),
      ),
      floatingActionButton: FloatingActionButton(
        // La FAB non dipende da _count -> NON si ricostruisce
        onPressed: () => setState(() => _count++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

// Per ridurre ulteriormente il scope del rebuild: estrai il widget che cambia
// in un StatefulWidget separato con il suo setState locale

// ANTI-PATTERN: setState al livello piu alto per dati condivisi
// SOLUZIONE: Riverpod, InheritedWidget o altri state management
// che permettono rebuild granulari solo ai widget che usano quel dato

Toetsen: gids voor typen en wanneer u ze kunt gebruiken

# Keys: ValueKey, ObjectKey, UniqueKey, GlobalKey

// ValueKey: key basata su un valore primitivo (id, stringa)
// USO: liste ordinate/filtrate dove gli item possono spostarsi
ListView.builder(
  itemBuilder: (context, index) => ProductCard(
    key: ValueKey(products[index].id), // usa l'id del dominio, stabile
    product: products[index],
  ),
)

// ObjectKey: key basata su un oggetto (confronto per identita)
// USO: quando hai un oggetto come chiave unica
ValueKey(product.id)       // preferibile: confronta l'ID (stringa/int)
ObjectKey(product)          // confronta il riferimento all'oggetto

// UniqueKey: genera una key unica ogni volta (non stabile tra rebuild!)
// USO: forzare la ricostruzione di un widget (reset del suo stato)
UniqueKey() // ATTENZIONE: ogni rebuild crea una key diversa = State perso

// GlobalKey: accede allo State o al RenderObject da fuori del tree
// RARO: evita quando possibile, ha overhead significativo
final _formKey = GlobalKey<FormState>();
Form(
  key: _formKey,
  child: Column(children: [...]),
)
// Poi: _formKey.currentState!.validate()

// REGOLA: usa GlobalKey solo per Form, ScaffoldMessenger, Navigator
// Per tutto il resto: passa callbacks o usa state management

Prestatiechecklist: Flutter Internals in de praktijk

const waar mogelijk: elke widget moet statisch zijn const. Schakel de lintregel in prefer_const_constructors.
Dynamische lijsten invoeren: elk ListView.builder o Column met dynamische kinderen moeten gebruiken ValueKey op basis van de domein-ID.
setState op het laagste niveau: uitpakken in een aparte StatefulWidget het deel van de gebruikersinterface dat verandert in plaats van setState op rootniveau aan te roepen.
RepaintBoundary voor animaties: wrap doorlopende animaties (laadspinner, voortgangsbalk, aftellen) in RepaintBoundary.
zou opnieuw moeten schilderen in CustomPainter: implementeer altijd logica correct in plaats van altijd terug te keren true.
Geen onnodige GlobalKeys: elke GlobalKey heeft overhead. Gebruik het alleen wanneer strikt noodzakelijk (formulier, steiger, navigator).

Conclusies

Inzicht in de drie bomen van Flutter – Widget, Element en RenderObject – transformeert elke codebeslissing, van ‘vage beste praktijken’ tot causaal begrip: weet je precies waarom const het werkt, omdat setState e efficiënt, omdat InheritedWidget geen onnodige cascade-reconstructies veroorzaakt.

Deze interne kennis is geen academisch detail: het is wat een individu scheidt Flutter-ontwikkelaar die "dingen laat werken" van iemand die apps bouwt met 60 fps gegarandeerde, voorspelbare geheugenvoetafdruk en architectuur die blijft presteren naarmate de codebase groeit. Het raamwerk heeft precieze architectonische keuzes gemaakt – ze begrijpen betekent dat je met het raamwerk kunt samenwerken in plaats van er tegenin te werken.