Getting Started with Flutter: A Beginner's Guide to Cross-Platform App Development

📘 Chapter 6: Adding Interactivity and Connecting APIs

🧭 What You’ll Learn

In this final chapter of the beginner’s guide, you’ll learn how to:

• Make your app interactive with user input and gestures
• Connect to external APIs using the http package
• Display dynamic data from the internet
• Handle API loading states and errors gracefully
• Structure async operations using Future, async/await, and Provider
• Build a basic weather/news/fetch demo using live API

📥 Making Flutter Apps Interactive

Interactivity refers to how users interact with your app’s UI and how the app responds.

📌 Common Interactions:

• Button clicks
• Form submission
• Pull to refresh
• Scrolling and gestures
• Tapping on list items
• Real-time data updates

✅ Buttons

dart

ElevatedButton(

  onPressed: () {

    print("Button Pressed");

  },

  child: Text("Click Me"),

)

✅ Gesture Detection

dart

GestureDetector(

  onTap: () => print("Tapped"),

  child: Container(

    padding: EdgeInsets.all(16),

    color: Colors.blue,

    child: Text("Tap here"),

  ),

)

✅ Checkbox & Switch

dart

bool isChecked = false;

Checkbox(

  value: isChecked,

  onChanged: (val) {

    setState(() {

      isChecked = val!;

    });

  },

)

Switch(

  value: isChecked,

  onChanged: (val) => setState(() => isChecked = val),

)

🌐 Connecting to External APIs

APIs allow your app to communicate with remote services to fetch dynamic data (e.g., news, weather, products).

🔧 Using the http Package

Step 1: Add to pubspec.yaml

yaml

dependencies:

  http: ^0.13.5

Step 2: Import It

dart

import 'package:http/http.dart' as http;

import 'dart:convert';

🔎 Example: Fetching Data from JSON API

dart

Future<List<dynamic>> fetchUsers() async {

  final response =

      await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));

  if (response.statusCode == 200) {

    return json.decode(response.body);

  } else {

    throw Exception('Failed to load data');

  }

}

🖥 Displaying Fetched Data

dart

class UsersPage extends StatefulWidget {

  @override

  _UsersPageState createState() => _UsersPageState();

}

class _UsersPageState extends State<UsersPage> {

  late Future<List<dynamic>> futureUsers;

  @override

  void initState() {

    super.initState();

    futureUsers = fetchUsers();

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('User List')),

      body: FutureBuilder<List<dynamic>>(

        future: futureUsers,

        builder: (context, snapshot) {

          if (snapshot.hasData) {

            return ListView(

              children: snapshot.data!

                  .map((user) => ListTile(

                        title: Text(user['name']),

                        subtitle: Text(user['email']),

                      ))

                  .toList(),

            );

          } else if (snapshot.hasError) {

            return Center(child: Text("Error: ${snapshot.error}"));

          }

          return Center(child: CircularProgressIndicator());

        },

      ),

    );

  }

}

📊 Handling Loading and Errors

📦 Full Flow Example: Weather App (OpenWeatherMap)

🔹 Setup

1. Sign up at https://openweathermap.org
2. Get your API key
3. Use the endpoint:

bash

https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric

🔹 Dart Code

dart

Future<Map<String, dynamic>> fetchWeather(String city) async {

  final url =

      'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=YOUR_API_KEY&units=metric';

  final response = await http.get(Uri.parse(url));

  if (response.statusCode == 200) {

    return json.decode(response.body);

  } else {

    throw Exception('Weather fetch failed');

  }

}

🔹 Display Weather

dart

FutureBuilder<Map<String, dynamic>>(

  future: fetchWeather('London'),

  builder: (context, snapshot) {

    if (snapshot.hasData) {

      final data = snapshot.data!;

      return Column(

        children: [

          Text("Temperature: ${data['main']['temp']} °C"),

          Text("Condition: ${data['weather'][0]['description']}"),

        ],

      );

    } else if (snapshot.hasError) {

      return Text("Error: ${snapshot.error}");

    }

    return CircularProgressIndicator();

  },

)

🧩 Using Provider for Async API Calls

Create a data model class:

dart

class WeatherProvider extends ChangeNotifier {

  Map<String, dynamic>? weather;

  bool isLoading = false;

  Future<void> loadWeather(String city) async {

    isLoading = true;

    notifyListeners();

    try {

      final res = await fetchWeather(city);

      weather = res;

    } catch (e) {

      print('Error: $e');

    }

    isLoading = false;

    notifyListeners();

  }

}

Use it in your widget:

dart

final provider = context.watch<WeatherProvider>();

provider.isLoading

    ? CircularProgressIndicator()

    : Text("Temp: ${provider.weather?['main']['temp'] ?? '--'}")

📦 Table: http Package Essentials

🧠 Best Practices for API Integration

• ✅ Wrap APIs in a separate service class
• ✅ Use async/await with try/catch
• ✅ Provide visual feedback for loading/errors
• ✅ Never hardcode API keys in source code (use dotenv)
• ✅ Keep UI and logic separate using state management

📘 Project Ideas for Practice

✅ Summary

In this chapter, you’ve learned how to:

• Build interactive UI using Flutter input and gesture widgets
• Connect to real-world APIs using the http package
• Fetch and display dynamic JSON data
• Use FutureBuilder to build UI around API results
• Handle errors and loading states
• Scale API logic with Provider or service abstraction

With this, you're now ready to move into intermediate Flutter development—building real apps that integrate data, logic, and design!