Building a portfolio web application using Flutter is a fantastic way to showcase your skills, projects, and designs. This blog will guide you through the process of creating and deploying your very own web portfolio using Flutter.

Demo

Here’s a sneak peek of the portfolio:

How to Create and Deploy

Follow the links below to learn more about creating and deploying web applications in Flutter:

• Flutter For Web: A Complete Guide to Create & Run a Web Application
• Flutter For Web: A Complete Guide to Deploy a Web Application

How to Use

Follow these simple steps to set up your project:

• Step 1: Download or clone this repo using the link below:
• GitHub Repository
• Step 2: Navigate to the project root and execute the following command in the console to get the required dependencies:

flutter pub get

• Step 3: Make sure you have upgraded Flutter to at least v1.5.4 by running this command from your machine:

flutter upgrade

Follow the link to learn more about how to configure Flutter for web: Flutter Configuration Guide

• Step 4: To run this application, simply type in the following command:

flutter packages pub global run webdev serve

Folder Structure

Understanding the folder structure can help you navigate your Flutter project efficiently. Here’s the core folder structure that Flutter provides:

• flutter-app-
• android-
• build-
• ios-
• lib-
• test-

In our project, we’re utilizing the following folder structure:

• lib-
• constants-
• ui-
• utils-
• widgets-
• main.dart

Diving into the lib folder

The lib folder is where the main code for the application resides. Here’s a breakdown of its components:

• constants: This directory holds all application-level constants, each in their respective files.
• ui: Contains all UI-related codes with a separate folder for each screen and its corresponding widgets.
• utils: Hosts common utility functions used across the application.
• widgets: Contains reusable components like buttons and text fields.
• main.dart: The entry point of your application, defining global application configurations.

Constants, UI, Utils, and Widgets Explained

Here’s a brief overview of what each directory does:

• constants: Think of this as your toolbox where every tool (constant) serves a specific function, from theme colors to API endpoints.
• ui: Imagine this as the architect’s blueprint, where each screen is laid out meticulously for construction.
• utils: Envision these as the utility workers who perform common tasks (functions) necessary for the building process.
• widgets: These are the modular building blocks, like LEGO pieces, that construct your entire application.

Understanding the main.dart File

The main.dart file is where your Flutter dream takes root. It initializes the app’s theme, routes, and certain configurations. Here’s where the magic begins:

import 'package:flutter_web/material.dart';
import 'package:portfolio/ui/home.dart';
import 'package:portfolio/utils/screen/screen_utils.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColorBrightness: Brightness.light,
        accentColorBrightness: Brightness.light,
      ),
      home: MyAppChild(),
    );
  }
}

class MyAppChild extends StatefulWidget {
  @override
  _MyAppChildState createState() => _MyAppChildState();
}

class _MyAppChildState extends State {
  @override
  Widget build(BuildContext context) {
    // Instantiate ScreenUtil singleton instance,
    // which will be used throughout the app for screen size
    ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
    return HomePage();
  }
}

In this code, we import necessary packages and set up the main structure of our Flutter app. It’s akin to laying down the foundation of a house before constructing the walls and roof.

Troubleshooting

If you encounter any issues during the development process, here are some troubleshooting tips:

• Ensure your Flutter SDK is up to date. Run flutter upgrade to check for updates.
• If you’re getting dependency errors, make sure to run flutter pub get in your console.
• Check for any typos in the code. A small mistake can lead to unexpected results!
• If the app fails to run, consider cleaning the project with flutter clean and then run the app again.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Building a portfolio web application using Flutter is a rewarding endeavor that showcases your capabilities. With this guide, you’ll be well on your way to creating an impressive online presence.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.