Build a Digital Business Card App

Step 1: Project Setup and Data Modeling

A well-organized project is easier to build, debug, and scale. We'll start by setting up a clean folder structure and defining a "model" for our data. A data model is simply a class that defines the structure of the data we expect to receive from the API. This practice enforces type safety and makes your code more readable and robust, much like defining an interface or type in TypeScript.

We'll use a free mock API called Random User Generator to get our business card data. A typical response for one user looks like this (simplified):

{
  "results": [
    {
      "name": {
        "first": "Ehmad",
        "last": "Saeed"
      },
      "email": "ehmad.saeed@example.com",
      "phone": "+92 321 1234567",
      "picture": {
        "large": "https://randomuser.me/api/portraits/men/75.jpg"
      }
    }
  ]
}

Our task is to fetch this JSON and convert it into a structured Dart object. Let's get our project ready for this.

```dart
// In lib/models/user.dart

class User {
  final String name;
  final String email;
  final String phone;
  final String pictureUrl;

  User({
    required this.name,
    required this.email,
    required this.phone,
    required this.pictureUrl,
  });

  // This is a 'factory constructor'. It's a common pattern for
  // creating an instance of a class from a JSON object.
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      name: '${json['name']['first']} ${json['name']['last']}',
      email: json['email'],
      phone: json['phone'],
      pictureUrl: json['picture']['large'],
    );
  }
}
```
Take a moment to analyze this class. It defines the structure of our user data and includes a helpful `fromJson` constructor to handle the conversion from raw JSON. This pattern is analogous to having a dedicated function or class method for object instantiation and mapping in other languages.

Step 2: The Networking Service

With our model in place, the next step is to create a dedicated "service" layer. The sole responsibility of this service is to handle communication with the API. This separation of concerns is a core principle of clean software design: the UI shouldn't know how the data is fetched, only that it can be requested.

This will feel very similar to using fetch in JavaScript. The Future returned by our service method is Dart's equivalent of a JavaScript Promise.

Based on what you've just watched, create a file remote_service.dart in your services folder and add the following code. This implementation is tailored for our specific API.

// In lib/services/remote_service.dart

import 'package:http/http.dart' as http;
import 'dart:convert';
import '../models/user.dart';

class RemoteService {
  Future<User?> getUser() async {
    var client = http.Client();

    var uri = Uri.parse('https://randomuser.me/api/?inc=name,email,phone,picture');
    var response = await client.get(uri);

    if (response.statusCode == 200) {
      var json = jsonDecode(response.body);
      // The API returns a list under the 'results' key
      var userJson = json['results'][0]; 
      return User.fromJson(userJson);
    } else {
      // Handle the error or return null
      return null;
    }
  }
}

Notice how we use http.get, await the response, perform a status check, and then use jsonDecode to parse the string. Finally, we use our User.fromJson factory constructor to create a clean, type-safe User object.

Step 3: Building an Asynchronous UI with FutureBuilder

Now we need to connect our service to the UI. A common challenge is handling the time it takes for the network request to complete. We need to show the user a loading indicator while we wait for data and then display the data once it arrives.

Flutter has a wonderful widget for this exact purpose: FutureBuilder. It takes a future (our getUser() method) and a builder function. The builder provides us with the state of the future (snapshot), allowing us to easily return different widgets for different states:

• ConnectionState.waiting: The future is still in progress. We show a loading spinner.
• ConnectionState.done: The future has completed. We check if we have data or an error and show the appropriate UI.

This declarative approach is very powerful and simplifies async UI logic immensely compared to manually managing loading flags.

Let's implement this in our main screen. Create a file named business_card_page.dart in a new folder called ui.

// In lib/ui/business_card_page.dart

import 'package:flutter/material.dart';
import '../services/remote_service.dart';
import '../models/user.dart';

class BusinessCardPage extends StatefulWidget {
  const BusinessCardPage({super.key});

  @override
  State<BusinessCardPage> createState() => _BusinessCardPageState();
}

class _BusinessCardPageState extends State<BusinessCardPage> {
  // A variable to hold the Future we want to build the UI from.
  late Future<User?> _userFuture;

  @override
  void initState() {
    super.initState();
    // Start fetching the user when the widget is first created.
    _userFuture = RemoteService().getUser();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Digital Business Card'),
      ),
      body: Center(
        child: FutureBuilder<User?>(
          future: _userFuture,
          builder: (context, snapshot) {
            // Case 1: The future is still running
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            }
            // Case 2: The future has completed with an error
            else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            }
            // Case 3: The future has completed successfully with data
            else if (snapshot.hasData) {
              final user = snapshot.data!;
              // We'll build our card widget here in the next step
              return Text('Name: ${user.name}'); 
            }
            // Case 4: The future completed with no data (or is null)
            else {
              return const Text('No user data found.');
            }
          },
        ),
      ),
    );
  }
}

Finally, update your main.dart to show this new page:

// In lib/main.dart

import 'package:flutter/material.dart';
import 'ui/business_card_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Digital Business Card',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const BusinessCardPage(),
    );
  }
}

Run your app now. You should see a loading spinner for a moment, followed by the user's name displayed on the screen. We have successfully fetched and displayed live data!

Step 4: Composing the Card and Adding Interactivity

With the data flowing, we can now focus on building the polished UI from our design goal. This will primarily use the layout widgets you've learned about (Container, Column, Row) and the state management concepts needed for the "tap-to-reveal" feature.

For this interactivity, we'll use a StatefulWidget. The _BusinessCardPageState we already created is perfect for this. We'll add a boolean flag, _showContactInfo, to its state. Tapping a part of the UI will call setState(), which toggles this flag and tells Flutter to rebuild the widget with the updated information. This mechanism is Flutter's equivalent of React's useState hook; calling the setter function triggers a re-render.

Replace the return Text('Name: ${user.name}'); line in your business_card_page.dart with the full card layout. Here is the complete code for _BusinessCardPageState, incorporating both the layout and the tap-to-reveal logic:

// In lib/ui/business_card_page.dart

class _BusinessCardPageState extends State<BusinessCardPage> {
  late Future<User?> _userFuture;
  bool _showContactInfo = false; // State for interactivity

  @override
  void initState() {
    super.initState();
    _userFuture = RemoteService().getUser();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal, // Set a background color
      appBar: AppBar(
        title: const Text('Digital Business Card'),
        backgroundColor: Colors.teal[700],
      ),
      body: Center(
        child: FutureBuilder<User?>(
          future: _userFuture,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator(color: Colors.white);
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}', style: const TextStyle(color: Colors.white));
            } else if (snapshot.hasData) {
              final user = snapshot.data!;
              return Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CircleAvatar(
                      radius: 50.0,
                      backgroundImage: NetworkImage(user.pictureUrl),
                    ),
                    const SizedBox(height: 10.0),
                    Text(
                      user.name,
                      style: const TextStyle(
                        fontFamily: 'Pacifico', // Add this font in pubspec.yaml for extra style!
                        fontSize: 40.0,
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      'FLUTTER DEVELOPER',
                      style: TextStyle(
                        fontFamily: 'Source Sans Pro', // Also add this font
                        color: Colors.teal.shade100,
                        fontSize: 20.0,
                        letterSpacing: 2.5,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(
                      height: 20.0,
                      width: 150.0,
                      child: Divider(color: Colors.teal.shade100),
                    ),
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          _showContactInfo = !_showContactInfo;
                        });
                      },
                      child: _showContactInfo 
                          ? Column(
                              children: [
                                InfoCard(text: user.phone, icon: Icons.phone),
                                InfoCard(text: user.email, icon: Icons.email),
                              ],
                            )
                          : InfoCard(text: 'Tap to view contact info', icon: Icons.touch_app),
                    ),
                  ],
                ),
              );
            } else {
              return const Text('No user data found.', style: TextStyle(color: Colors.white));
            }
          },
        ),
      ),
    );
  }
}

// A helper widget to reduce code duplication for the info cards
class InfoCard extends StatelessWidget {
  final String text;
  final IconData icon;

  const InfoCard({super.key, required this.text, required this.icon});

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      margin: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
      child: ListTile(
        leading: Icon(
          icon,
          color: Colors.teal,
        ),
        title: Text(
          text,
          style: TextStyle(
            color: Colors.teal.shade900,
            fontFamily: 'Source Sans Pro',
            fontSize: 18.0,
          ),
        ),
      ),
    );
  }
}

Study this final code carefully. Notice how the GestureDetector wraps the contact section. Its onTap callback triggers setState, which toggles our boolean flag. The conditional expression (_showContactInfo ? ... : ...) then rebuilds the UI to either show the contact details or the "tap to reveal" prompt. This is declarative UI and state management in action.

Conclusion

Congratulations on building your first complete Flutter app! You've successfully navigated the entire process from project setup to a polished, interactive, data-driven UI.

Let's recap the key skills you've put into practice:

• Project Structuring: You organized your code into models, services, and ui folders for better maintainability.
• Networking: You used the http package to make an API call and parsed the JSON response into a type-safe Dart model.
• Asynchronous UI: You learned to use the FutureBuilder widget to declaratively handle loading, error, and data states, creating a smooth user experience.
• UI Composition: You combined Column, CircleAvatar, Text, and custom Card widgets to build a complex layout.
• State Management: You used a StatefulWidget and the setState method to manage and react to user interaction, implementing the tap-to-reveal feature.

This project forms a solid foundation for almost any app you will build. In our next module, we'll dive deeper into Advanced UI. You'll learn how to build more complex layouts, create a consistent app theme, and craft beautiful animations to bring your user interfaces to life.