Junior
Quali sono i tipi di widget in Flutter?
sobes.tech AI
Risposta dell'AI
In Flutter, i widget sono divisi in due categorie principali:
- StatelessWidget: Widget il cui stato non cambia dopo la compilazione iniziale. Descrivono una parte dell'interfaccia utente che non dipende da dati in tempo di esecuzione.
- StatefulWidget: Widget con stato mutabile. Hanno un oggetto associato
State, che contiene dati modificabili e fornisce un meccanismo per ricostruire il widget quando lo stato cambia.
Inoltre, i widget possono essere classificati in base al loro scopo:
- Widget di layout: Controllano la disposizione di altri widget sullo schermo (ad esempio,
Row,Column,Stack). - Componenti Material / widget Cupertino: Forniscono elementi UI pronti all'uso che rispettano le linee guida Material Design (Android) o Cupertino (iOS) (ad esempio,
AppBar,Button,TextField). - Widget di input: Permettono all'utente di interagire con l'app (ad esempio,
TextField,Checkbox,Slider). - Widget interattivi: Rispondono ai gesti dell'utente (ad esempio,
GestureDetector,InkWell). - Widget di pittura ed effetti: Applicano effetti grafici (ad esempio,
Opacity,ClipRRect). - Widget di scorrimento: Consentono lo scorrimento del contenuto (ad esempio,
ListView,GridView).
In base al metodo di creazione, i widget possono essere:
- Primitivi: Blocchi di costruzione di base (ad esempio,
Container,Text,Icon). - Composti: Composti da altri widget.
// Esempio di StatefulWidget
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// Cambia lo stato e ridisegna
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Contatore:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Aumenta',
child: Icon(Icons.add),
),
],
);
}
}
// Esempio di StatelessWidget
class TitleWidget extends StatelessWidget {
final String title;
TitleWidget({required this.title});
@override
Widget build(BuildContext context) {
return Text(
title,
style: TextStyle(fontSize: 24),
);
}
}