Sobes.tech
Junior

Quais são os tipos de widgets existentes no Flutter?

sobes.tech IA

Resposta da IA

No Flutter, os widgets são divididos em duas categorias principais:

  • StatelessWidget: Widgets cujo estado não muda após a compilação inicial. Eles descrevem uma parte da interface de utilizador que não depende de dados em tempo de execução.
  • StatefulWidget: Widgets com estado mutável. Têm um objeto associado State, que contém dados modificáveis e fornece um mecanismo para reconstruir o widget quando o estado muda.

Além disso, os widgets podem ser classificados de acordo com o seu propósito:

  • Widgets de layout: Controlam a disposição de outros widgets na tela (por exemplo, Row, Column, Stack).
  • Componentes Material / widgets Cupertino: Fornecem elementos de UI prontos a usar que cumprem as diretrizes do Material Design (Android) ou Cupertino (iOS) (por exemplo, AppBar, Button, TextField).
  • Widgets de entrada: Permitem ao utilizador interagir com a aplicação (por exemplo, TextField, Checkbox, Slider).
  • Widgets interativos: Respondem a gestos do utilizador (por exemplo, GestureDetector, InkWell).
  • Widgets de pintura e efeitos: Aplicam efeitos gráficos (por exemplo, Opacity, ClipRRect).
  • Widgets de scroll: Proporcionam scroll de conteúdo (por exemplo, ListView, GridView).

De acordo com a forma de criação, os widgets podem ser:

  • Primitivos: Blocos de construção básicos (por exemplo, Container, Text, Icon).
  • Compostos: Compostos por outros widgets.
// Exemplo de StatefulWidget
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

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

  void _incrementCounter() {
    setState(() {
      // Alterar o estado e iniciar a reconstrução
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Contador:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Incrementar',
          child: Icon(Icons.add),
        ),
      ],
    );
  }
}
// Exemplo 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),
    );
  }
}