Step 1 — Install Flutter

Go to flutter.dev/get-started and follow the install for your OS. Once done, open a terminal and confirm it works with flutter doctor. Every line should show a green checkmark — fix any red ones before continuing.

Step 2 — Create the project & folder structure

Run this in your terminal:

flutter create inventory_app

cd inventory_app

Step 3 — Install packages

Open pubspec.yaml and replace the dependencies section with this:

dependencies:

  flutter:

    sdk: flutter

  provider: ^6.1.2

  uuid: ^4.4.0

  shared_preferences: ^2.2.3

Then run: 

flutter pub get

Step 4 — Design tokens (your Figma colors → Dart)

Here is your complete design system translated directly from the Figma design:

Now paste these files one by one. Start with the core design tokens:

lib/core/app_colors.dart

import 'package:flutter/material.dart';

class AppColors {

  // Primary — matches Figma #6C63FF

  static const primary       = Color(0xFF6C63FF);

  static const primaryLight  = Color(0xFFEEEDFE);

  static const primaryMid    = Color(0xFFAFA9EC);

  // Backgrounds

  static const background    = Color(0xFFFFFFFF);

  static const surface       = Color(0xFFF5F5F5);

  // Text

  static const textPrimary   = Color(0xFF1A1A1A);

  static const textSecondary = Color(0xFF6B6B6B);

  static const textHint      = Color(0xFFAAAAAA);

  // Stock status — matches Figma badges

  static const stockOkBg     = Color(0xFFEAF3DE);

  static const stockOkText   = Color(0xFF27500A);

  static const stockLowBg    = Color(0xFFFAEEDA);

  static const stockLowText  = Color(0xFF633806);

  static const stockOutBg    = Color(0xFFFCEBEB);

  static const stockOutText  = Color(0xFF791F1F);

  // Border

  static const border        = Color(0xFFE0E0E0);

  static const divider       = Color(0xFFF0F0F0);

}

https://www.figma.com/community/prototyping-animation/interactive?resource_type=files&editor_type=all&price=all&sort_by=all_time&creators=all 

https://instiki.ac.id/2023/11/28/5-rekomendasi-plugin-figma-untuk-memudahkan-pekerjaan-designer/ 

plugins in figma:

https://www.protopie.io/blog/best-figma-plugins 

https://tilda.education/en/musthave-figma-plugins 

https://uxpilot.ai/blogs/best-figma-ai-plugins 

https://buildwithangga.com/tips/12-plugin-figma-paling-membantu-untuk-uiux-designer 

https://uihut.com/blog/best-figma-plugins 

https://heroicons.com/ 

lorem ipsum

content reel

color filter

random name generator

autoflow

easometric

rename it

split shape

find and replace

Map Maker

Nisa Text Splitter

spellchecker

smoothshadow

UIFaces

iconify

Satosi variable

Image scale

iphonr ui kit figma 

https://www.figma.com/community/file/768365747273056340 

android ui kit figma

https://www.figma.com/community/file/1237551184114564748 

lunacy and penpot