Reduza o código padrão com o Flutter Hooks!

O Flutter hooks é um pacote do Flutter que fornece uma maneira de reduzir o código padrão em seu aplicativo Flutter. Ele faz isso permitindo que você reutilize a lógica com estado em vários widgets. Dessa forma, você pode tornar seu código mais conciso, mais legível e mais reutilizável.

Para usar os hooks do Flutter, primeiro você precisa adicionar o pacote ao seu projeto. Você pode fazer isso adicionando a seguinte linha ao seu arquivo pubspec.yaml:

dependencies:
  flutter_hooks: ^0.20.3

Depois de adicionar o pacote, você pode começar a usar os hooks em seu código. Aqui estão alguns exemplos de como você pode usar hooks para reduzir o código padrão:

Hook useState

O hook useState permite que você gerencie o estado em um widget sem precisar criar um StatefulWidget separado. Veja um exemplo:

import 'package:flutter_hooks/flutter_hooks.dart';

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final count = useState(0);
    return Scaffold(
      body: Center(
        child: Text('Count: ${count.value}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count.value++,
        child: Icon(Icons.add),
      ),
    );
  }
}

Neste exemplo, o hook useState é usado para criar uma variável de estado chamada count. Essa variável pode ser acessada e modificada dentro do método de build do widget usando a propriedade count.value. Quando o usuário toca no botão de ação flutuante, a contagem é incrementada chamando count.value++.

Hook useEffect

O hook useEffect permite que você execute efeitos colaterais em um widget, como a obtenção de dados ou a assinatura de um fluxo. Veja um exemplo:

import 'package:flutter_hooks/flutter_hooks.dart';

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final data = useState([]);
    useEffect(() {
      fetchData().then((result) {
        data.value = result;
      });
    }, []);
    return ListView.builder(
      itemCount: data.value.length,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text(data.value[index]),
        );
      },
    );
  }
}

Neste exemplo, o hook useEffect é usado para buscar dados de uma fonte remota e armazená-los na variável de data. O gancho useEffect é chamado quando o widget é criado pela primeira vez, e a lista de dependências vazia [] garante que ele seja executado apenas uma vez. Os dados são então exibidos em um widget ListView usando a propriedade data.value.

Hook useMemoized

O hook useMemoized permite que você armazene em cache o resultado de uma função de alto custo computacional para que ele seja calculado somente quando necessário. Veja um exemplo:

import 'package:flutter_hooks/flutter_hooks.dart';

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final expensiveResult = useMemoized(() => doExpensiveCalculation());
    return Text('Result: $expensiveResult');
  }
}

Neste exemplo, o hook useMemoized é usado para armazenar em cache o resultado de um cálculo caro que é executado pela função doExpensiveCalculation. O resultado é então exibido em um widget de Text usando a interpolação de string $expensiveResult.

O uso de hooks pode tornar seu código mais conciso, mais legível e mais reutilizável. Ao reduzir a quantidade de código boilerplate em seu aplicativo Flutter, você pode se concentrar em escrever o código que realmente importa.