Cześć! Jestem

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.

Skontaktuj się

O Mnie

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.

Moje Umiejętności

Analisi Dati & Modelli Previsionali

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

Automatyzacja Procesów

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

Systemy Na Zamówienie

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"
  ]
};

Moja Misja

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

Demokratyzacja Technologii

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.

Łączenie IT i Biznesu

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à.

Tworzenie Rozwiązań na Miarę

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.

Przekształć Swój Biznes z Technologią

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.

Porozmawiajmy →

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.

Skontaktuj się

Masz projekt? Porozmawiajmy! Wypełnij formularz, a odpowiem wkrótce.

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

Flutter Internals: Poznaj ramy pisania lepszego kodu

Flutter zbudowany jest w większości na trzech równoległych i zsynchronizowanych drzewach deweloperów, których nigdy nie zna bezpośrednio, a mimo to to oni determinują każdy aspekt wydajność i zachowanie aplikacji. Zrozumienie Drzewa widgetów, theDrzewa żywiołów e il Drzewo obiektu renderowania zmienić sposób gdzie piszesz kod Fluttera: wyjaśnij dlaczego const i zwycięski występ, dlaczego setState i lokalnie, ponieważ InheritedWidget propaguje dane bez przebudowywania bezużyteczne i ponieważ GlobalKey jest niebezpieczny.

Ten artykuł nie ma charakteru teoretycznego: każdej koncepcji towarzyszą praktyczne przykłady realny wpływ na wydajność i architekturę. Na koniec będziesz mógł pomyśleć o czym to naprawdę się dzieje, gdy Flutter rysuje klatkę.

Czego się nauczysz

Trzy drzewa Flutter: Widget, Element i RenderObject
Ponieważ widżety są niezmienne i są przebudowywane w każdej klatce
Jak Element zarządza cyklem życia i stanem
Proces uzgadniania: jak Flutter znajduje różnice między klatkami
Dlaczego const widget pozwala uniknąć przebudowy drzewa elementów
Jak setState zaznacza tylko poddrzewo, które się zmienia
InheritedWidget: propagacja danych bez kaskadowych przebudów
Przebieg układu: wiązania w dół, rozmiary w górę, pozycje podczas malowania
RepaintBoundary: izoluj strefy ponownego malowania

Trzy drzewa trzepotania

Kiedy piszesz widżet Flutter, deklaratywnie opisujesz interfejs użytkownika. Flutter bierze ten opis i buduje wewnętrznie trzy odrębne struktury danych z różnymi obowiązkami. Ta separacja jest podstawą wydajności Fluttera.

Drzewo	Zmienność	Odpowiedzialność	Czas trwania
Drzewa widgetów	Niezmienny	Opis konfiguracji interfejsu użytkownika	Krótki (przebudowany w każdej wersji)
Drzewa żywiołów	Zmienny	Cykl życia, stan, pojednanie	Długie (utrzymuje się pomiędzy odbudowami)
Drzewo obiektu renderowania	Zmienny	Układ, test trafień, malowanie	Długie (leniwie aktualizowane)

Drzewo widżetów: niezmienny opis

Widżet w Flutter i a niezmienna konfiguracja: opisuje jak powinna pojawić się część interfejsu użytkownika, ale nie zawiera ona stanu ani renderowania. Za każdym razem, gdy dzwonisz build(), Flutter tworzy nowe obiekty widżetów — ekonomiczne działanie, ponieważ widżety są po prostu przydzielonymi obiektami konfiguracyjnymi na stercie i od razu kandydaci do wyrzucenia śmieci.

# 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.

Drzewo elementów: Menedżer cyklu życia

Drzewo Elementów jest sercem frameworka Flutter. Każdy węzeł drzewa elementów pasuje do widżetu w drzewie, ale pozostaje niezmieniony podczas przebudowy. Element wie bieżący Widget, zarządza stanem (poprzez StatefulElement) i decyduje czy zaktualizować obiekt RenderObject, czy utworzyć nowy.

# 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: Gdzie mieszka państwo

Jednym z najczęściej zadawanych pytań przez nowych programistów Fluttera jest: „dlaczego stan czy nie zostanie on utracony po odbudowaniu Widgetu?”. Odpowiedź znajduje się w drzewie elementów: państwo żyje w żywiole (w szczególności w StatefulElement), nie w Widgecie.

# 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();
}

Drzewo RenderObject: układ i malowanie

Drzewo RenderObject jest poziomem najbliższym metalowi: zarządza układem (obliczanie pozycji i rozmiarów), testowanie trafień (który widget reaguje na dotyk) i malarstwo (rysunek na płótnie). W porównaniu do drzewa elementów, drzewa RenderObject jest aktualizowany tylko wtedy, gdy jest to konieczne, a aktualizacje mają charakter przyrostowy.

# 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: Niezrozumiana wydajność Win

Słowo kluczowe const na widżecie to nie tylko preferencje stylistyczne: oraz podstawową optymalizację, która eliminuje pracę uzgadniającą w drzewie elementów.

# 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: Wydajna propagacja danych

InheritedWidget to mechanizm, dzięki któremu Flutter propaguje dane w dół drzewa bez konieczności przekazywania parametrów przez każdą warstwę. I podstawa motywu, MediaQuery, Nawigator i sam Riverpod.

# 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: zakres lokalny i dlaczego jest wydajny

# 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

Klucze: przewodnik po typach i kiedy ich używać

# 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

Lista kontrolna wydajności: Flutter Internals w praktyce

const, gdziekolwiek to możliwe: każdy widget musi być statyczny const. Włącz regułę lint prefer_const_constructors.
Wprowadź listy dynamiczne: każdy ListView.builder o Column z dynamicznymi dziećmi muszą korzystać ValueKey na podstawie identyfikatora domeny.
setState na najniższym poziomie: wyodrębnij do osobnego StatefulWidget część interfejsu użytkownika, która się zmienia zamiast wywoływać setState na poziomie głównym.
RepaintBoundary dla animacji: zawijaj ciągłe animacje (pokrętło ładowania, pasek postępu, odliczanie) w RepaintBoundary.
powinienRepaint w CustomPainter: zawsze wdrażaj logikę poprawne, zamiast zawsze wracać true.
Żadnych niepotrzebnych kluczy globalnych: każdy GlobalKey ma narzut. Użyj tego tylko wtedy, gdy jest to absolutnie konieczne (forma, rusztowanie, nawigator).

Wnioski

Zrozumienie trzech drzew Fluttera — Widget, Element i RenderObject — powoduje transformację każda decyzja dotycząca kodu, od „niejasnych najlepszych praktyk” po zrozumienie przyczynowe: wiesz dokładnie dlaczego const to działa, ponieważ setState tj wydajny, ponieważ InheritedWidget nie powoduje niepotrzebnych przebudów kaskadowych.

Ta wewnętrzna wiedza nie jest szczegółem akademickim: jest tym, co oddziela: Programista Flutter, który „sprawia, że wszystko działa” od kogoś, kto tworzy aplikacje z szybkością 60 klatek na sekundę gwarantowane, przewidywalne zużycie pamięci i architektura, która pozostaje wydajna w miarę powiększania się bazy kodu. W ramach dokonano precyzyjnych wyborów architektonicznych — zrozumienie ich oznacza możliwość współpracy z frameworkiem, zamiast działać przeciwko niemu.