Detalhes do pacotev1.0.2

simple_circular_progress_bar

Pacote Flutter de código aberto, indicador circular simples de progresso.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 7,2 mil
Curtidas: 194
Pontos Pub: 160

Instalar pacote

flutter pub add simple_circular_progress_bar

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um pacote leve e de código aberto do Flutter para criar indicadores circulares simples. Oferece uma maneira limpa e personalizável de exibir estados de carregamento ou progresso com configuração mínima. O pacote suporta todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. Projetado para desenvolvedores que buscam uma alternativa fácil de usar em vez de interfaces complexas de progresso, oferece animações suaves e opções de configuração simples. Ideal para uso em formulários, telas de carregamento de dados ou qualquer cenário que exija feedback visual sobre processos em andamento.

Casos de uso

indicadores de estado de carregamento
Progresso de envio do formulário
Visualização de busca de dados
Progresso de nível no jogo ou aplicativo
Elementos de interface personalizáveis

Principais recursos

API simples
Suporte multiplataforma
Animações suaves
Cores e tamanhos personalizáveis
Dependências mínimas
Integração fácil

Indicado para

Desenvolvedores iniciantes do Flutter
Interfaces de usuário simples de carregamento
Aplicativos sensíveis ao desempenho
Prototipagem rápida
Aplicativos que precisam de indicadores de progresso leves

Considerações

Personalização limitada em comparação com pacotes avançados
Sem rótulos de texto embutidos
Não adequado para rastreamento complexo de progresso
Requer manipulação manual de valores dinâmicos
Melhor para necessidades básicas de progresso circular

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

Simple circular progress bar

Open source Flutter package, simple circular progress bar.

Installing

Add in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  simple_circular_progress_bar: ^1.0.2

Now in your code, you can import:

import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart';

Basic examples

See the full example here. Most of the examples are in the rows_in_progress_bar_example folder.

Example numbers correspond to their numbers in the code. To quickly find examples in the repository, look in the code: 'EXAMPLE CODE'.

Colors

Dart code

// Example 1
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
)

// Example 2
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan, Colors.purple],
),

// Example 3
SimpleCircularProgressBar(
    progressColors: const [
        Colors.cyan,
        Colors.green,
        Colors.amberAccent,
        Colors.redAccent,
        Colors.purpleAccent
    ],
    backColor: Colors.blueGrey,
),

Start angle

Dart code

// Example 4
SimpleCircularProgressBar(
    startAngle: 45,
),

// Example 5
SimpleCircularProgressBar(
    startAngle: 90,
),

// Example 6
SimpleCircularProgressBar(
    startAngle: -180,
),

Thickness of the lines

Dart code

// Example 7
SimpleCircularProgressBar(
    size: 80,
    progressStrokeWidth: 25,
    backStrokeWidth: 25,
),

// Example 8
SimpleCircularProgressBar(
    progressStrokeWidth: 20,
    backStrokeWidth: 10,
),

// Example 9
SimpleCircularProgressBar(
    backStrokeWidth: 0,
),

Merge mode

Dart code

// Example 10
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
    mergeMode: true,
),

// Example 11
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
    fullProgressColor: Colors.deepOrangeAccent,
    mergeMode: true,
),

// Example 12
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan, Colors.purpleAccent],
    mergeMode: true,
),

Animation time

If you don't need animation, set animationDuration = 0.

Dart code

// Example 13
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: const Duration(milliseconds: 500),
),

// Example 14
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: const Duration(seconds: 3),
),

// Example 15
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: const Duration(minutes: 1),
),

Text

Dart code

// Example 16
SimpleCircularProgressBar(
    mergeMode: true,
    onGetText: (double value) {
        return Text('${value.toInt()}%');
    },
),

// Example 17
SimpleCircularProgressBar(
    valueNotifier: valueNotifier,
    mergeMode: true,
    onGetText: (double value) {
        return Text(
            '${value.toInt()}',
            style: const TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Colors.white,
            ),
        );
    },
),

// Example 18
SimpleCircularProgressBar(
    valueNotifier: valueNotifier,
    mergeMode: true,
    onGetText: (double value) {
        TextStyle centerTextStyle = TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Colors.greenAccent.withOpacity(value * 0.01),
        );
        
        return Text(
            '${value.toInt()}',
            style: centerTextStyle,
        );
    },
),

Value Notifier Example

You can read about how ValueNotifier works here.

The source code of the example can be found here.

Parameters description

Parameter	Default	Description
size double	100	Widget size.
maxValue double	100	The maximum value of the progress bar. The values will vary from 0 to [maxValue].
startAngle double	0	The angle from which the countdown of progress begins.
progressStrokeWidth double	15	Thickness of the progress line.
backStrokeWidth double	15	Line thickness of the background circle. If you don't need a background circle, set this parameter to 0.
progressColors List		Progress bar can be either with or without a gradient. For a gradient, specify more than one color in the [progressColors] field and if a gradient is not needed specify only one color.
fullProgressColor Color		The color of the circle at 100% value. It only works when [mergeMode] equal to true.
backColor Color		The color of the background circle.
animationDuration int	Duration(seconds: 6)	Animation duration. If you don't need animation, set this parameter to zero Duration.
mergeMode bool	false	When this mode is enabled the progress bar with a 100% value forms a full circle with [fullProgressColor]. If no [fullProgressColor] is specified, the last color from [progressColors] is taken.
valueNotifier ValueNotifier		The object designed to update the value of the progress bar. By default, creates a ValueNotifier with the maximum value.
onGetText Text Function(double)		Callback to generate a new Text widget located in the center of the progress bar. The callback input is the current value of the progress bar.

YouTube video

You can see how the application works from the example in this video.

Categorias

Indicadores: Carregando, Atualizar, Progresso

Repositório-fonte

Nulllix/simple_circular_progress_bar

simple_circular_progress_bar

☆ 17 Estrelas⑂ 10 Forks

DartHTML

Projetos que usam este pacote

jicsontoh/EcoMateSG

EcoMateSG

☆ 1 Estrelas⑂ 2 Forks

DartC++