Tutorial: Indicadores de Progresso Personalizados no Flutter

Este tutorial vai te guiar na criação de indicadores de progresso lineares e circulares com estilos personalizados no Flutter.

Indicador de Progresso Linear

Passo 1: Configure o SizedBox

Começamos definindo um SizedBox para limitar a largura do nosso indicador de progresso:

SizedBox(
  width: 200,
  child: // Nosso indicador de progresso virá aqui
)

Passo 2: Adicione cantos arredondados com ClipRRect

Para dar cantos arredondados ao nosso indicador de progresso, usaremos o ClipRRect:

ClipRRect(
  borderRadius: BorderRadius.all(Radius.circular(10)),
  child: // Nosso LinearProgressIndicator virá aqui
)

Passo 3: Crie o LinearProgressIndicator

Agora, vamos adicionar o LinearProgressIndicator com cores personalizadas:

LinearProgressIndicator(
  value: 0.7,
  valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF545CEA)),
  backgroundColor: Color(0xFFCBD5E1),
  minHeight: 8,
)

Passo 4: Combine todos os elementos

Juntando tudo:

SizedBox(
  width: 200,
  child: ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(10)),
    child: LinearProgressIndicator(
      value: 0.7,
      valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF545CEA)),
      backgroundColor: Color(0xFFCBD5E1),
      minHeight: 8,
    ),
  ),
)

Indicador de Progresso Circular

Passo 1: Crie o CircularProgressIndicator

Para o indicador de progresso circular, usaremos o widget CircularProgressIndicator:

CircularProgressIndicator(
  value: 0.7,
  valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF545CEA)),
  backgroundColor: Color(0xFFCBD5E1),
  strokeWidth: 8,
)

Passo 2: Personalize o tamanho (opcional)

Se você quiser controlar o tamanho do indicador circular, envolva-o em um SizedBox:

SizedBox(
  width: 100,
  height: 100,
  child: CircularProgressIndicator(
    value: 0.7,
    valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF545CEA)),
    backgroundColor: Color(0xFFCBD5E1),
    strokeWidth: 8,
  ),
)

Observações Finais

Lembre-se de importar os pacotes necessários do Flutter:
```
import 'package:flutter/material.dart';
```
Coloque esses widgets dentro de um método build de um StatelessWidget ou StatefulWidget.
A propriedade value (0.7 em nossos exemplos) representa 70% de progresso. Ajuste esse valor entre 0.0 e 1.0 para mudar o nível de progresso.
Cores e dimensões podem ser personalizadas para se adequar ao design do seu aplicativo.

Seguindo estes passos, você criará indicadores de progresso personalizados. Sinta-se à vontade para ajustar os valores e experimentar diferentes estilos para atender às suas necessidades!

Criando indicadores de progresso personalizados no Flutter