A minimal home screen design for a spending tracker app in flutter
Read Time:49 Second

A minimal home screen design for a spending tracker app in flutter

0 0

Spending Tracker Flutter Home Screen

A minimal home screen design for a spending tracker app in flutter

This recreates a ui design for a spending tracker app in Flutter.

This Flutter project recreates a minimal home screen design for a spending tracker app. The mockup was created by @elainelumanauw.design on Dribble.

I saw the mockup on instagram in one of Elaine’s reels and thought it would be cool to try recreating it functionally in Flutter.

What it looks like in Flutter

A minimal home screen design for a spending tracker app in flutter

The original design mocks

A minimal home screen design for a spending tracker app in flutter

Running this project

flutter run in the project directory.

Project Structure

The files specifically added/edited for the project are:

  • assets
    • …images for the 3 categories
  • lib/constants
    • app_colors.dart, which contains an abstracts constants-encapsulating class for some common colors.
  • lib/models
    • spending_category_model.dart to encapsulate information about each category
  • lib/screens
    • home_screen.dart, which contains the main/home screen of the app.
  • lib/widgets
    • …All the widgets used in the home screen
  • lib/main.dart

GitHub

https://github.com/Aldo111/Flutter-Spending-Tracker

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta

Entrada anterior A Weather App Created To Replicate Design With Flutter
Entrada siguiente Keep And Save Your Password In One App Build With Flutter