loading and error
- Flutter course
- Intermediate
- Lesson 23/99
- 4 min
Handle states with ConnectionState.waiting and hasError.
loading and error
Two cases are common in FutureBuilder: while ConnectionState.waiting show a loading indicator, and when snapshot.hasError show an error message.
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}These two checks improve the user experience.
Error handling with hasError
snapshot.hasError becomes true when the Future throws an error. In this case, you show the error with snapshot.error.
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}If the error is not caught, the app may crash.
Practice Handle loading, error and data states
The veriGetir async method should wait 100 ms and return 'Hazır'. In FutureBuilder<String>: while waiting show CircularProgressIndicator, if hasError show Text('hata'), otherwise show Text(snapshot.data!). In main, call print('başladı').
Starter code
import 'package:flutter/material.dart';
Future<String> veriGetir() async {
await Future.delayed(Duration(milliseconds: 100));
return 'Hazır';
}
void main() {
print('başladı');
runApp(MaterialApp(home: Ekrani()));
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
// FutureBuilder: waiting, hasError, data durumlarını yönet
child: Text('bekle'),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
Future<String> veriGetir() async {
await Future.delayed(Duration(milliseconds: 100));
return 'Hazır';
}
void main() {
print('başladı');
runApp(MaterialApp(home: Ekrani()));
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder<String>(
future: veriGetir(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('hata');
}
return Text(snapshot.data!);
},
),
),
);
}
}Expected output
başladı
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which indicator is used for loading state in FutureBuilder?
- Scaffold
- Text
- CircularProgressIndicator Correct answer
- AppBar
Explanation: In ConnectionState.waiting, a loading indicator such as CircularProgressIndicator is shown.
2 Add the loading indicator
if (snapshot.connectionState == ConnectionState.waiting) {
return ____();
}if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}Explanation: When ConnectionState.waiting, CircularProgressIndicator is returned; this visualizes the loading state.
3 loading and error parts
| Term | Meaning |
|---|---|
ConnectionState.waiting |
Loading phase |
hasError |
True when Future throws |
CircularProgressIndicator |
Loading indicator |
snapshot.error |
Thrown error |