Building a Flutter Portfolio: Showcasing Niche Projects like Plugins, Desktop Apps, and ML Integration

A strong Flutter portfolio is more than just UI skills; it's about demonstrating unique value and expertise in real-world use cases. This guide will show you how to create an impressive Flutter portfolio featuring plugin development, desktop apps, and machine learning integrations. It's designed to help developers stand out and prove their capabilities beyond simple mobile applications.

Custom Flutter Plugin Development

Flutter plugins allow you to interact with platform-specific functionalities. Showcasing a custom plugin demonstrates your understanding of platform channels and native code, distinguishing you from other Flutter developers.

Example: battery_info_plus

Folder Structure:

battery_info_plus/

┣ android/

┣ ios/

┣ lib/

┃ ┗ battery_info_plus.dart

┣ test/

┣ pubspec.yaml

Dart Plugin Interface (battery_info_plus.dart):

import 'dart:async';

import 'package:flutter/services.dart';


class BatteryInfoPlus {

  static const MethodChannel _channel = MethodChannel('battery_info_plus');


  static Future<String?> getBatteryLevel() async {

    final String? batteryLevel = await _channel.invokeMethod('getBatteryLevel');

    return batteryLevel;

  }

}

Android Native Implementation (MainActivity.java):

new MethodChannel(getFlutterEngine().getDartExecutor().getBinaryMessenger(), "battery_info_plus")

        .setMethodCallHandler((call, result) -> {

          if (call.method.equals("getBatteryLevel")) {

            BatteryManager batteryManager = (BatteryManager) getSystemService(BATTERY_SERVICE);

            int batteryLevel = batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY);

            result.success(batteryLevel + "%");

          } else {

            result.notImplemented();

          }

        });

This plugin can be reused in any app and published on pub.dev.

Flutter Desktop App: Personal Finance Tracker (macOS/Windows)

Flutter's desktop support is rapidly evolving. Building a desktop app demonstrates your versatility with input devices, large screen UIs, and platform behaviors. A personal finance tracker is a great project to showcase these skills.

Features:

• Expense input
• Charts with fl_chart
• Data stored with sqlite3 or hive

Dependencies:

dependencies:

  flutter:

    sdk: flutter

  fl_chart: ^0.55.1

  hive: ^2.2.3

  hive_flutter: ^1.1.0

Chart Widget Example:

import 'package:fl_chart/fl_chart.dart';


class ExpenseChart extends StatelessWidget {

  final List<double> weeklyExpenses;

  ExpenseChart(this.weeklyExpenses);


  @override

  Widget build(BuildContext context) {

    return LineChart(

      LineChartData(

        lineBarsData: [

          LineChartBarData(

            spots: List.generate(weeklyExpenses.length, (i) => FlSpot(i.toDouble(), weeklyExpenses[i])),

            isCurved: true,

            colors: [Colors.greenAccent],

            barWidth: 3,

          )

        ],

      ),

    );

  }

}

Desktop App Tips:

• Use ResizablePane or SplitView layout
• Use MouseRegion, Tooltip, and shortcuts for better UX
• Save state with shared_preferences or Hive

Machine Learning Integration: Image Classifier with TFLite

Integrating machine learning into your Flutter apps is a highly sought-after skill. This demonstrates your ability to blend native AI capabilities, making you a more attractive candidate.

Dependencies:

dependencies:

  tflite: ^1.1.2

  image_picker: ^1.0.4

TFLite Setup:

• Add your .tflite model to assets/
• Load model in initState()

import 'package:tflite/tflite.dart';


class MLService {

  Future<void> loadModel() async {

    await Tflite.loadModel(

      model: "assets/model.tflite",

      labels: "assets/labels.txt",

    );

  }


  Future<List?> classifyImage(File image) async {

    return await Tflite.runModelOnImage(

      path: image.path,

      numResults: 5,

      threshold: 0.5,

    );

  }

}

Usage:

final picker = ImagePicker();

final image = await picker.pickImage(source: ImageSource.gallery);

final result = await MLService().classifyImage(File(image!.path));

print(result);

By showcasing these niche projects, your Flutter portfolio will highlight your knowledge across platforms, real-world problem-solving abilities, and initiative to explore beyond tutorials.