What is FutureBuilder in Flutter and how is it used to build dynamic UI?

Overview

FutureBuilder

Future

Basic Structure

dartCopy
FutureBuilder<DataType>(
  future: myFuture,          // The Future to listen to
  builder: (context, snapshot) {
    // snapshot.connectionState — loading/done
    // snapshot.data — result when done
    // snapshot.error — error if failed
  },
)

Full Example

dartCopy
class UserProfileScreen extends StatelessWidget {
  Future<User> fetchUser() async {
    final response = await http.get(Uri.parse('https://api.example.com/user/1'));
    return User.fromJson(jsonDecode(response.body));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Profile')),
      body: FutureBuilder<User>(
        future: fetchUser(),
        builder: (context, snapshot) {
          // Loading state
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }
          // Error state
          if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          }
          // Success state
          if (snapshot.hasData) {
            final user = snapshot.data!;
            return Column(
              children: [
                CircleAvatar(backgroundImage: NetworkImage(user.avatarUrl)),
                Text(user.name),
                Text(user.email),
              ],
            );
          }
          return SizedBox.shrink();
        },
      ),
    );
  }
}

ConnectionState Values

none

waiting

active

done

Avoid Rebuilding Future on Each Build

dartCopy
class _MyState extends State<MyWidget> {
  late Future<User> _userFuture;

  @override
  void initState() {
    super.initState();
    _userFuture = fetchUser(); // ✅ Store it — don't call in build()
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<User>(
      future: _userFuture, // ✅ Reuse same Future
      builder: (context, snapshot) { ... },
    );
  }
}

⚠️ Never call

textCopy

future: fetchUser()

directly in build — it creates a new Future on each rebuild!

FutureBuilder vs StreamBuilder

Future

Stream

Best Practice: Use

textCopy

FutureBuilder

for one-time async data loads. For real-time updates, use

textCopy

StreamBuilder

.