Блог

Я хочу сделать пользовательский круговой индикатор выполнения. В котором я могу установить максимальное значение, например 1200. Ход выполнения круга меняется в зависимости от моего входного значения. Если я введу 100 в качестве значения, оно будет отображаться как прогресс. Если я снова введу 200, он суммирует это значение с предыдущим, например: 200 100= 300, и показывает прогресс.

Он будет делать то же самое до тех пор, пока не достигнет максимального значения. Если он пересекает максимальное значение, то вычисляется дополнительное значение, которое я ввел.

Например, если я введу 1500, он покажет дополнительное значение 300.

Я проверил много статей о круговом индикаторе выполнения.

Но я не могу понять, как это сделать в Флаттере.

Вы можете использовать CircularProgressIndicator.adaptive, это дает вам возможность указывать «значение»прогресса.

вы можете указать любое значение прогресса от 0 до 1 (1-полный круг), поэтому можете указать свои значения в виде дроби (значение прогресса/общее значение) в параметре value.

Например, в вашем случае 100/1200

а для дополнительного значения вы можете добавить простую проверку, которая определит, превышает ли значение прогресса ваше общее значение, а затем покажет их разницу

Вот код, который увеличивает значение прогресса на 100, нажав на кнопку, а также показывает дополнительное значение (если таковое имеется).

 class ExampleScreen extends StatefulWidget {   const ExampleScreen({Key? key}) : super(key: key);   @override  Statelt;ExampleScreengt; createState() =gt; _ExampleScreenState(); }  class _ExampleScreenState extends Statelt;ExampleScreengt; {  int totalValue = 1200;  int loadingValue = 0;   void onAddButtonPressed() {  setState(() {  loadingValue  = 100;  });  }   @override  Widget build(BuildContext context) {  return Scaffold(  floatingActionButton: FloatingActionButton(  onPressed: onAddButtonPressed,  tooltip: 'Add 100',  child: const Icon(Icons.add),  ),  body: Center(  child: Column(  mainAxisSize: MainAxisSize.min,  children: [  CircularProgressIndicator.adaptive(  value: loadingValue / totalValue,  ),  if (loadingValue gt; totalValue) ...[  const SizedBox(  height: 10,  ),  Text(  'your extra values are ${loadingValue - totalValue}',  ),  ]  ],  ),  ),  );  } }