5 min readJan 29, 2022

It’s now a necessity to have your own online Portfolio. There are various different ways by which one can make it happen by using tools like WordPress, WIX. But if you are a Flutter developer then easiest way to make this happen is by using Flutter itself. In this Article, below I am going to explain how easily one can create their own attractive Portfolio using Flutter.

Decide the Design or the Structure of the App

I have divided the app into the below 6 sections.

Top Navigation
Intro Section
Project Section
Skills Section
Contact Us
Social Media Links

Initial File Structure for the Portfolio App Project:

List of Plugins Used:

velocity_x: // Responsive and Fast UI development.
hovering: ^1.0.4 // on Hover Effect
lottie: // Animated Image
font_awesome_flutter: // for Social Media Icons
animated_text_kit: ^4.2.1 // Animated Text
percent_indicator: ^3.4.0  // percentage Indicator
url_launcher: // Giving Link to Social media Websites.

Let’s Begin! Here we go!

import 'package:flutter/material.dart';

import 'Home/home_page.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
   primarySwatch: Colors.deepPurple,
      ),
      home: Home()
    );
  }
}

home_page.dart

On the Home page, I have used the VxDevice widget from Velocityx as the root widget which will give me 2 options mobile and web. This will help us to create different UI for mobile and web. In this App, I am only just targeting Mobile and Web. If you want to design an app for all screen sizes then please do check my previous article.

Full code for home_page.dart

Navigation

In this App, I want Navigation that will have the following functionality.

Sticky Header

For the Sticky Header, I have put all the links and logo inside the AppBar. If you want to create a more customized Header then you can also use SliverAppBar.

On Hover effect

For the On Hover effect, I have used the hovering plugin which is very handy and easy to use.

HoverAnimatedContainer(
  width: 80,
  height: 50,
  color: Colors.black,
  hoverColor: Colors.deepPurpleAccent.shade100,
  child: MaterialButton(
      child: new Text("Home").text.xl.white.make(),
      onPressed: () {
       setState(() {
         if (targetContext1 != null) {
           Scrollable.ensureVisible(targetContext1,
               alignment: 0, duration: Duration(seconds: 1));
         }

       });
      }),
),

Single Page Navigation.

In this app, I want to show all the sections on a single page. Once you click on the menu link it will scroll to that section. This functionality is a little bit tricky. To do so, we are going to use Scrollable.ensureVisible within a SingleChildScrollView widget with a Column child. We will create a GlobalKey() for each section. Then we will use this key as the key of the widget that the link we will be targeting. Finally, we are going to use this key when we press the link from the Menu:

final targetContext = targetKey.currentContext;
if (targetContext != null) {
    Scrollable.ensureVisible(
        targetContext,
        duration: const Duration(milliseconds: 400),
        curve: Curves.easeInOut,
    );
}

The complete code for web_page.dart

For the Mobile view, I have added all the menu items in the end Drawer. That way, it will be easy to navigate: mobile_page.dart

Complete code for mobile_page.dart and drawer_menu.dart

Intro Section

In this Section, we have two widgets named VxBox and Image. To make Text eye-catchy, you can set the style of some parts of the Text with Rich Text. For Animated text, I have used the Animated Text kit package.

VxBox(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        40.heightBox,
        "<b>"
            .richText
            .withTextSpanChildren([
          "Hello".textSpan.white.bold.size(30).make(),
          "</b>".textSpan.purple400.bold.make(),
          "\nI'M Maria,".textSpan.purple400.bold.make(),
          // "Flutter".textSpan.white.size(25).bold.make(),
          // "\nDeveloper".textSpan.wider.white.bold.make()
        ])
            .purple400
            .xl6
            .size(25)
            .bold
            .make()
            .p8(),

        SizedBox(
          width: context.screenWidth*0.5,
          child: DefaultTextStyle(
            style: const TextStyle(
                fontSize: 70.0,
                fontWeight: FontWeight.bold,
                color: Colors.white
            ),
            child: AnimatedTextKit(
              animatedTexts: [
                FadeAnimatedText('Full StackDeveloper'),
                FadeAnimatedText('YouTuber'),
                FadeAnimatedText('Blogger'),
                FadeAnimatedText('Designer'),
                FadeAnimatedText('Mentor'),
              ],
              onTap: () {
                print("Tap Event");
              },
            ),
          ),
        ),


      ],
    )).width(context.screenWidth * 0.5).make().px16(),

complete code for intro_web.dart: and intro_mobile.dart:

Projects Section:

In website design, Sliders are very common. Hence, I wanted to show you all the Sliding effects in Flutter web for which I have used VxSwiper Widget from VelocityX.

VxSwiper(
    scrollDirection: Axis.horizontal,
    // aspectRatio: 16/9,
    height:context.isMobile? context.screenHeight:context.screenHeight*0.5,
    enableInfiniteScroll: true,
    initialPage: 0,
    viewportFraction: 0.6,
    reverse: false,
    enlargeCenterPage: true,
    isFastScrollingEnabled: false,
    autoPlay: true,
    autoPlayInterval: Duration(seconds: 5),
    autoPlayAnimationDuration: Duration(milliseconds: 800),
    autoPlayCurve: Curves.easeInCubic,
    items: [

      VxBox(
          child: Image.network("https://image.freepik.com/free-psd/moody-restaurant-food-web-site-mock-up_23-2148406845.jpg",height: context.screenHeight*0.4,width: context.screenWidth*0.5,fit: BoxFit.cover,)
      ).width(context.screenWidth*0.5).make(),
      VxBox(
          child: Image.network("https://image.freepik.com/free-psd/smartphone-mockup-apps_23-2148080568.jpg",height: context.screenHeight*0.4,width: context.screenWidth*0.5,fit: BoxFit.cover)
      ).width(context.screenWidth*0.5).make(),
    
    ])

complete code for project_web.dart and project_mobile.dart

Skills Section :

In this section, I have used the ListView widget with scrolling horizontally. Inside ListView, I am using HoverCrossFadeWidget which helps to get on Hover effect

full code of skills_web.dart and skills_mobile.dart

Contact Section:

In this section, I have used Lottie animation and created a simple container that has contact details. If you want to put more functionality to this section then you can also use contactus flutter plugin.

VxBox(
  child: Lottie.network(
    'https://assets8.lottiefiles.com/packages/lf20_6ucq5rzc.json',

  ),
).height(context.screenHeight*0.7).width(context.screenWidth*0.5).make(),

full code of contact_web.dart and contact_mobile.dart

Social Media Links:

I want my social media links should always be visible to users so need to have floating functionality. I have used floating Action buttons for that and changed the location of that. I want to link my social media account in a flutter web app so I have used the Url launcher plugin and for the Mobile, I have used the WebView plugin.

_launchURLFacebook() async {
  const url = 'https://www.facebook.com/renuka.kelkar';
  if (await canLaunch(url)) {
    await launch(url, forceSafariVC: true, forceWebView: true);
  } else {
    throw 'Could not launch $url';
  }
}

Complete code for floatingActionButton.dart

You can find the GitHub Link of the above program here! If you like this article, then do not forget to give your likes & claps! :-)

Thank you!