Sobes.tech
Junior

Ce tipuri de widget-uri există în Flutter?

sobes.tech AI

Răspuns de la AI

În Flutter, widget-urile sunt împărțite în două categorii principale:

  • StatelessWidget: Widget-uri al căror stare nu se schimbă după construcția inițială. Ele descriu o parte a interfeței utilizatorului care nu depinde de datele în timpul execuției.
  • StatefulWidget: Widget-uri cu stare modificabilă. Au un obiect State asociat, care conține date modificabile și oferă un mecanism pentru reconstrucția widget-ului atunci când starea se schimbă.

De asemenea, widget-urile pot fi clasificate în funcție de scopul lor:

  • Widget-uri de layout: Controlează poziționarea altor widget-uri pe ecran (de exemplu, Row, Column, Stack).
  • Componente Material / widget-uri Cupertino: Oferă elemente UI gata făcute, conforme cu ghidurile Material Design (Android) sau Cupertino (iOS) (de exemplu, AppBar, Button, TextField).
  • Widget-uri de input: Permite utilizatorului să interacționeze cu aplicația (de exemplu, TextField, Checkbox, Slider).
  • Widget-uri interactive: Reacționează la gesturile utilizatorului (de exemplu, GestureDetector, InkWell).
  • Widget-uri de pictură și efecte: Aplică efecte grafice (de exemplu, Opacity, ClipRRect).
  • Widget-uri de derulare: Asigură derularea conținutului (de exemplu, ListView, GridView).

În funcție de modul de creare, widget-urile pot fi:

  • Primitivi: Blocuri de construcție de bază (de exemplu, Container, Text, Icon).
  • Compozite: Formate din alte widget-uri.
// Exemplu de StatefulWidget
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // Schimbă starea și reafișează
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Contor:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Crește',
          child: Icon(Icons.add),
        ),
      ],
    );
  }
}
// Exemplu de StatelessWidget
class TitleWidget extends StatelessWidget {
  final String title;

  TitleWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(fontSize: 24),
    );
  }
}