Sobes.tech
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),
    );
  }
}