El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En Flutter, els widgets són els elements bàsics de la interfície d'usuari. Hi ha dos tipus principals de widgets: Stateless i Stateful. Entendre la diferència entre aquests dos tipus és fonamental per desenvolupar aplicacions eficients i mantenibles.

Què és un Widget Stateless?

Un widget Stateless és un widget immutable, és a dir, el seu estat no canvia durant el cicle de vida de l'aplicació. Aquests widgets es creen una vegada i no es tornen a construir a menys que el seu parent canviï.

Característiques dels Widgets Stateless:

No tenen estat intern.
Són immutables.
Es tornen a construir només quan el parent canvia.

Exemple de Widget Stateless:

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateless Widget Example'),
      ),
      body: Center(
        child: Text('Hello, I am a Stateless Widget!'),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyStatelessWidget(),
));

Explicació del Codi:

MyStatelessWidget: És una classe que hereta de StatelessWidget.
build: El mètode build retorna un Scaffold amb una AppBar i un Center que conté un Text.

Què és un Widget Stateful?

Un widget Stateful és un widget que manté un estat intern que pot canviar durant el cicle de vida de l'aplicació. Aquests widgets es tornen a construir cada vegada que el seu estat canvia.

Característiques dels Widgets Stateful:

Tenen estat intern.
Són mutables.
Es tornen a construir cada vegada que el seu estat canvia.

Exemple de Widget Stateful:

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyStatefulWidget(),
));

Explicació del Codi:

MyStatefulWidget: És una classe que hereta de StatefulWidget.
_MyStatefulWidgetState: És la classe d'estat que conté la lògica i l'estat del widget.
_counter: És una variable d'estat que manté el nombre de vegades que s'ha premut el botó.
_incrementCounter: És una funció que incrementa _counter i crida setState per reconstruir el widget.
build: El mètode build retorna un Scaffold amb una AppBar, un Center que conté un Column amb dos Text, i un FloatingActionButton.

Comparació entre Widgets Stateless i Stateful

Característica	Stateless Widget	Stateful Widget
Estat	Immutable	Mutable
Re-construcció	Quan el parent canvia	Quan l'estat intern canvia
Ús	Elements estàtics	Elements dinàmics
Exemple	Text, Icon	Formularis, Botons interactius

Exercici Pràctic

Exercici:

Crea una aplicació Flutter que mostri un text que canviï cada vegada que es prem un botó. Utilitza un widget Stateful per implementar aquesta funcionalitat.

Solució:

import 'package:flutter/material.dart';

class TextChanger extends StatefulWidget {
  @override
  _TextChangerState createState() => _TextChangerState();
}

class _TextChangerState extends State<TextChanger> {
  String _displayText = 'Hello, World!';

  void _changeText() {
    setState(() {
      _displayText = _displayText == 'Hello, World!' ? 'Hello, Flutter!' : 'Hello, World!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Changer Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_displayText),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _changeText,
              child: Text('Change Text'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: TextChanger(),
));

Explicació del Codi:

TextChanger: És una classe que hereta de StatefulWidget.
_TextChangerState: És la classe d'estat que conté la lògica i l'estat del widget.
_displayText: És una variable d'estat que manté el text que es mostra.
_changeText: És una funció que canvia _displayText i crida setState per reconstruir el widget.
build: El mètode build retorna un Scaffold amb una AppBar, un Center que conté un Column amb un Text i un ElevatedButton.

Conclusió

En aquesta secció, hem après la diferència entre widgets Stateless i Stateful, com crear-los i quan utilitzar cadascun. Els widgets Stateless són ideals per a elements estàtics, mentre que els widgets Stateful són necessaris per a elements dinàmics que canvien durant el cicle de vida de l'aplicació. Amb aquesta base, estàs preparat per explorar més widgets i funcionalitats en Flutter.

Widgets Stateless vs Stateful

Què és un Widget Stateless?

Característiques dels Widgets Stateless:

Exemple de Widget Stateless:

Explicació del Codi:

Què és un Widget Stateful?

Característiques dels Widgets Stateful:

Exemple de Widget Stateful:

Explicació del Codi:

Comparació entre Widgets Stateless i Stateful

Exercici Pràctic

Exercici:

Solució:

Explicació del Codi:

Conclusió

Curs de Desenvolupament Flutter

Mòdul 1: Introducció a Flutter

Mòdul 2: Conceptes Bàsics de Programació en Dart

Mòdul 3: Widgets de Flutter

Mòdul 4: Gestió de l'Estat

Mòdul 5: Navegació i Enrutament

Mòdul 6: Xarxes i APIs

Mòdul 7: Persistència i Emmagatzematge

Mòdul 8: Conceptes Avançats de Flutter

Mòdul 9: Proves i Depuració

Mòdul 10: Desplegament i Manteniment

Mòdul 11: Flutter per a Web i Escriptori