Индикатор загрузки CircularProgressIndicator в Flutter
Пользователю нужно видеть, что приложение
не зависло. Круговой индикатор Material -
CircularProgressIndicator.
Его ставят по центру или рядом с текстом
«Загрузка…».
Без параметров рисуется бесконечная
анимация. Цвет можно взять из
Theme.of(context).colorScheme.primary.
Для известного процента есть
CircularProgressIndicator(value: 0.4):
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: LoadingDemoPage()));
}
class LoadingDemoPage extends StatefulWidget {
const LoadingDemoPage({super.key});
@override
State<LoadingDemoPage> createState() => _LoadingDemoPageState();
}
class _LoadingDemoPageState extends State<LoadingDemoPage> {
bool loading = true;
@override
void initState() {
super.initState();
Future<void>.delayed(const Duration(seconds: 2), () {
if (!mounted) return; // no setState after dispose
setState(() {
loading = false;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Loading')),
body: Center(
child: loading
? const CircularProgressIndicator()
: const Text('Done'),
),
);
}
}
Покажите индикатор и подпись
'Please wait' в Column.
Через три секунды замените блок на
'Data received'.