Junior
Koje vrste vidžeta postoje u Flutteru?
sobes.tech АИ
Одговор од АИ
U Flutter-u, widgeti se dele na dve osnovne kategorije:
- StatelessWidget: Widgeti čije stanje se ne menja nakon inicijalne izgradnje. Oni opisuju deo UI-ja koji ne zavisi od podataka u realnom vremenu.
- StatefulWidget: Widgeti sa promenljivim stanjem. Oni imaju povezani objekat
State, koji sadrži promenljive podatke i obezbeđuje mehanizam za ponovno građenje widgeta pri promeni stanja.
Pored toga, widgeti se mogu klasifikovati prema njihovoj nameni:
- Layout widgeti: Kontrolišu raspored drugih widgeta na ekranu (npr.
Row,Column,Stack). - Material Components / Cupertino widgeti: Obezbeđuju gotove UI elemente koji odgovaraju smernicama Material Design (Android) ili Cupertino (iOS) (npr.
AppBar,Button,TextField). - Input widgeti: Omogućavaju korisniku da interaguje sa aplikacijom (npr.
TextField,Checkbox,Slider). - Interactive widgeti: Reaguju na gestove korisnika (npr.
GestureDetector,InkWell). - Painting & Effects widgeti: Primaju grafičke efekte (npr.
Opacity,ClipRRect). - Scrolling widgeti: Omogućavaju skrolovanje sadržaja (npr.
ListView,GridView).
Po načinu kreiranja, widgeti mogu biti:
- Primitivni: Osnovni gradivni blokovi (npr.
Container,Text,Icon). - Kombinovani: Sastavljeni od drugih widgeta.
// Primer StatefulWidget
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// Menjamo stanje i pokrećemo ponovno crtanje
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Brojač:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Povećaj',
child: Icon(Icons.add),
),
],
);
}
}
// Primer StatelessWidget
class TitleWidget extends StatelessWidget {
final String title;
TitleWidget({required this.title});
@override
Widget build(BuildContext context) {
return Text(
title,
style: TextStyle(fontSize: 24),
);
}
}