5 Best uses of FutureBuilder in Flutter

By | April 1, 2025

Below are the 5 Best uses of FutureBuilder in Flutter with code in one simple code with comments

import 'package:flutter/material.dart';
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilderExamples(),
    );
  }
}

class FutureBuilderExamples extends StatelessWidget {
  Future<String> fetchData() async {
    await Future.delayed(Duration(seconds: 2));
    return "API Data Loaded";
  }

  Future<bool> checkUserAuth() async {
    await Future.delayed(Duration(seconds: 2));
    return true; // Simulating user is logged in
  }

  Future<String> loadSettings() async {
    await Future.delayed(Duration(seconds: 2));
    return "Dark Mode Enabled";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("FutureBuilder Examples")),
      body: Column(
        children: [
          // Fetching API Data
          FutureBuilder<String>(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text("Error: ${snapshot.error}");
              } else {
                return Text(snapshot.data ?? "");
              }
            },
          ),
          
          // Authentication Check
          FutureBuilder<bool>(
            future: checkUserAuth(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasData && snapshot.data == true) {
                return Text("User is Logged In");
              } else {
                return Text("User is Not Logged In");
              }
            },
          ),
          
          // Loading Configuration Settings
          FutureBuilder<String>(
            future: loadSettings(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else {
                return Text("Settings: ${snapshot.data}");
              }
            },
          ),
        ],
      ),
    );
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *