Build Your Portfolio Website Using Flutter Web and Dio

🚀 Build Your Portfolio Website Using Flutter Web and Dio

📦 What is Dio?

Dio is a powerful HTTP client for Dart, widely used in Flutter apps. It offers features like interceptors, global configuration, form handling, and more. In this project, we’ll use it to submit contact forms directly to an API.

dependencies:
  dio: ^5.4.0

🛠️ Project Overview

The portfolio will contain the following sections:

• About Me
• My Skills
• My Portfolio
• Contact Us

💡 Set Up the Project

flutter create portfolio_web
cd portfolio_web
flutter run -d chrome

🖼️ Create the Screens

Create separate Dart files in your screens/ folder for each section.

1. About Me

class AboutMe extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(\"Hi, I'm a Flutter Developer passionate about clean UI.\"),
    );
  }
}

2. My Skills

final skills = ['Flutter', 'Dart', 'Firebase', 'Dio'];

ListView.builder(
  itemCount: skills.length,
  itemBuilder: (context, index) => ListTile(
    leading: Icon(Icons.check),
    title: Text(skills[index]),
  ),
);

3. Portfolio

final projects = [
  {'title': 'To-Do App', 'description': 'A task manager with cloud sync'},
];

ListView.builder(
  itemCount: projects.length,
  itemBuilder: (context, index) => ListTile(
    title: Text(projects[index]['title']!),
    subtitle: Text(projects[index]['description']!),
  ),
);

4. Contact Us (with Dio)

final dio = Dio();
final nameController = TextEditingController();

ElevatedButton(
  onPressed: () async {
    await dio.post('https://your-api.com/contact', data: {
      'name': nameController.text,
      'email': emailController.text,
      'message': messageController.text,
    });
  },
  child: Text('Submit'),
);

🌐 Deploy Your Website

flutter build web

This command generates the website in the /build/web folder. You can host it using:

• GitHub Pages
• Firebase Hosting
• Netlify / Vercel

🚀 How to Use Dio Interceptors in Your Flutter Web Portfolio

Dio is one of the most powerful HTTP clients for Flutter. But did you know you can add an Interceptor to log, modify, or handle API requests globally? 😎 In this quick guide, you’ll learn how to use InterceptorsWrapper with Dio in your Flutter Web portfolio project.

🛡️ What is an Interceptor?

An interceptor acts like a watchman on your network calls. It can:

• Log API requests and responses
• Attach tokens to headers
• Handle errors like 401/500 globally
• Retry failed requests

🔧 How to Add an Interceptor in Dio

Here’s how to add it to your app:

// 1. Import Dio
import 'package:dio/dio.dart';

// 2. Create Dio instance and add Interceptor
final dio = Dio();

dio.interceptors.add(
  InterceptorsWrapper(
    onRequest: (options, handler) {
      print('👉 Request: \${options.method} \${options.path}');
      options.headers['Authorization'] = 'Bearer YOUR_TOKEN_HERE';
      return handler.next(options);
    },
    onResponse: (response, handler) {
      print('✅ Response: \${response.statusCode}');
      return handler.next(response);
    },
    onError: (DioError e, handler) {
      print('❌ Error: \${e.message}');
      return handler.next(e);
    },
  ),
);
  

📩 Example: Use Interceptor in Contact Form

This example hooks into your “Contact Us” form to log the submission.

ElevatedButton(
  onPressed: () async {
    try {
      final response = await dio.post(
        'https://your-api.com/contact',
        data: {
          'name': nameController.text,
          'email': emailController.text,
          'message': messageController.text,
        },
      );
      print("✅ Message sent: \${response.statusCode}");
    } catch (e) {
      print("❌ Error occurred: \$e");
    }
  },
  child: Text('Submit'),
);
  

🔥 What Can You Do with Interceptors?

• Add headers → Add auth tokens globally
• Log API calls → Great for debugging
• Catch errors → Show a snackbar or redirect
• Retry logic → Handle network drops

✅ Summary

• Tool: Dio + InterceptorsWrapper
• Use: Monitor, modify, handle all API calls
• Power: Centralized token + error management

🎯 Add this to your Flutter Web portfolio site to make your backend integration rock solid! Got questions? Drop them in the comments below 👇

🚀 Build a Contact Form with Dio Interceptor in Flutter Web

Want to take your Flutter Web portfolio to the next level? In this tutorial, you’ll learn how to integrate a contact form with Dio, use interceptors for request/response handling, and send data to an API.

📦 What is Dio?

Dio is a powerful HTTP client for Flutter/Dart. It supports interceptors, global configuration, and error handling. We’ll use it to submit a contact form and log API requests using an interceptor.

🧠 What is an Interceptor?

• Intercepts every API request and response
• Can log, modify headers, and handle errors globally
• Great for adding tokens or showing messages on failures

🛠️ Full Flutter Web Example with Interceptor

This is your complete main.dart file that builds a portfolio contact page with Dio:

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

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

class MyPortfolioApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Flutter Web Portfolio',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: PortfolioHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class PortfolioHomePage extends StatelessWidget {
  final Dio dio = Dio();
  final TextEditingController nameController = TextEditingController();
  final TextEditingController emailController = TextEditingController();
  final TextEditingController messageController = TextEditingController();

  PortfolioHomePage() {
    dio.interceptors.add(
      InterceptorsWrapper(
        onRequest: (options, handler) {
          print("📤 Sending Request to: ${options.uri}");
          options.headers['Authorization'] = 'Bearer demoToken123';
          return handler.next(options);
        },
        onResponse: (response, handler) {
          print("✅ Response: ${response.statusCode}");
          return handler.next(response);
        },
        onError: (DioError e, handler) {
          print("❌ Error: ${e.message}");
          return handler.next(e);
        },
      ),
    );
  }

  void sendContactForm(BuildContext context) async {
    try {
      final response = await dio.post(
        'https://your-api.com/contact',
        data: {
          'name': nameController.text,
          'email': emailController.text,
          'message': messageController.text,
        },
      );
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("Message Sent! Status: ${response.statusCode}")),
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("Error sending message")),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("🧑‍💻 My Portfolio")),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("👋 About Me", style: Theme.of(context).textTheme.headline5),
            SizedBox(height: 10),
            Text("Hi! I'm a Flutter Developer passionate about UI and Web.",
              style: TextStyle(fontSize: 16)),
            Divider(height: 40),

            Text("📨 Contact Me", style: Theme.of(context).textTheme.headline5),
            SizedBox(height: 10),
            TextField(controller: nameController, decoration: InputDecoration(labelText: 'Name')),
            TextField(controller: emailController, decoration: InputDecoration(labelText: 'Email')),
            TextField(controller: messageController, maxLines: 4, decoration: InputDecoration(labelText: 'Message')),
            SizedBox(height: 20),
            ElevatedButton.icon(
              onPressed: () => sendContactForm(context),
              icon: Icon(Icons.send),
              label: Text("Submit"),
            ),
          ],
        ),
      ),
    );
  }
}
  

🧪 How to Test This

• Run on Chrome: flutter run -d chrome
• Replace API URL with: https://httpbin.org/post for testing
• Watch console logs for request/response

✅ Summary

• 📬 Dio handles form submissions
• 🔐 Interceptors let you log, attach headers, and manage errors
• 🌐 Flutter Web gives you a beautiful front-end for all of this

Let me know if you want the ZIP download, retry logic, or a fancier UI in the comments!