Snackbar – Rugburn https://rugburn.dev Software Development Sun, 02 Nov 2025 20:12:16 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://i0.wp.com/rugburn.dev/wp-content/uploads/2025/07/20250729_2055_Software-Developer-Logo_remix_01k1cghcbzfzy8hv45v6gsykj2.webp?fit=32%2C32&ssl=1 Snackbar – Rugburn https://rugburn.dev 32 32 244879875 Flutter Favorite Places App https://rugburn.dev/flutter-favorite-places-app/ Sun, 02 Nov 2025 20:08:43 +0000 https://rugburn.dev/?p=765 .flutter-embed-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: #f5f5f5; } .mobile-frame { width: 375px; height: 667px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 10px solid #1a1a1a; position: relative; } .mobile-frame iframe { width: 100%; height: 100%; border: none; } /* Responsive - full width on mobile */ @media (max-width: 768px) { .mobile-frame { width: 100%; height: 800px; border-radius: 0; border: none; } }

Made with Flutter 3.35 / Dart 3.9

Overview

A full-featured Flutter mobile application that allows users to capture, save, and manage their favorite locations with photos and geolocation data. This project demonstrates enterprise-level mobile development practices with Firebase backend integration and native device features.

Features

Core Functionality

  • Photo Capture & Management: Take photos directly from the device camera or select from gallery with automatic quality optimization and cloud storage
  • Geolocation Services: Capture precise location coordinates with automatic address resolution using Google Maps Geocoding API
  • Interactive Maps: Display saved locations on static map previews with Google Maps integration
  • User Authentication: Secure email/password authentication with email verification flow
  • Real-time Data Sync: Instant synchronization of places across devices using Firebase Firestore
  • Dismissible List Items: Swipe-to-delete functionality with undo capability

User Experience

  • Responsive Form Validation: Real-time input validation with helpful error messages
  • Loading States: Visual feedback during asynchronous operations (uploads, authentication, data fetching)
  • Error Handling: Graceful error handling with user-friendly snackbar notifications
  • Smooth Navigation: Intuitive page routing between screens with proper state management
  • Modal Interfaces: Bottom sheet for image source selection (camera vs. gallery)
  • Custom Theming: Consistent Material Design 3 theme with dark mode support

Technical Skills Demonstrated

Flutter & Dart

  • State Management: StatefulWidget lifecycle management with proper controller patterns
  • Custom Controllers: Reusable controller pattern for form components (UserImagePicker, LocationInput)
  • Async/Await: Proper asynchronous programming with Future handling and error management
  • Stream Builders: Real-time UI updates using Firestore snapshots
  • Form Validation: Complex form validation with custom validators
  • Platform Detection: Cross-platform code with web/mobile conditional rendering

Firebase Integration

  • Firebase Authentication: User registration, login, email verification, and session management
  • Cloud Firestore: NoSQL database with nested collections for user-specific data
  • Firebase Storage: Image upload with metadata, organized folder structure, and download URL generation
  • Firebase Functions: Backend cleanup of orphaned images (implemented separately)
  • Security: Proper user-based data isolation and authentication state management

Native Device Features

  • Camera Access: Integration with device camera using image_picker plugin
  • Photo Gallery: Access to device photo library
  • Location Services: GPS location retrieval with permission handling
  • Permission Management: Runtime permission requests for camera and location

API Integration

  • Google Maps Geocoding API: Reverse geocoding to convert coordinates to human-readable addresses
  • Google Maps Static API: Generate static map images for location previews
  • RESTful HTTP Requests: Proper API calls with error handling using the http package

Architecture & Best Practices

  • Separation of Concerns: Clear separation between models, screens, and widgets
  • Error Handling: Comprehensive try-catch blocks with timeout handling
  • Loading States: Proper UI feedback during async operations
  • Memory Management: Proper disposal of controllers and resources
  • Code Organization: Well-structured file hierarchy and naming conventions
  • Logging: Strategic use of developer logs for debugging

UI/UX Design

  • Material Design 3: Modern UI following Material Design guidelines
  • Responsive Layouts: Adaptive layouts using SingleChildScrollView and flexible containers
  • Custom Theming: Centralized theme configuration with ColorScheme
  • Visual Feedback: Loading indicators, fade-in images, and smooth transitions
  • Accessibility: Proper semantic structure and color contrast
]]> 765 Flutter To-Do App https://rugburn.dev/flutter-to-do-app/ Mon, 13 Oct 2025 18:25:40 +0000 https://rugburn.dev/?p=690 .flutter-embed-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: #f5f5f5; } .mobile-frame { width: 375px; height: 667px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 10px solid #1a1a1a; position: relative; } .mobile-frame iframe { width: 100%; height: 100%; border: none; } /* Responsive - full width on mobile */ @media (max-width: 768px) { .mobile-frame { width: 100%; height: 800px; border-radius: 0; border: none; } }

Developed with Flutter 3.35 / Dart 3.9

This project is a cross-platform To-Do list app demo. Users can add, delete, change the priority and log completion of tasks. Check out the live To-Do web app demo.

Theming

This app offers two unique UIs for Dark and Light theme user preferences.

Light vs Dark Theme

Skills

  • Theming to support dark and light mode UIs
  • Modal Views for adding new to-do tasks and alerting user of invalid input
  • Dismissible list items, to allow user to swipe an task to remove it
  • Snackbar notifications to allow user to ‘undo’ when deleting a task
  • Hosting using Firebase
]]> 690 Flutter Expense Tracking App https://rugburn.dev/flutter-expense-tracking-app/ Sat, 11 Oct 2025 15:28:56 +0000 https://rugburn.dev/?p=638 .flutter-embed-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: #f5f5f5; } .mobile-frame { width: 375px; height: 667px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 10px solid #1a1a1a; position: relative; } .mobile-frame iframe { width: 100%; height: 100%; border: none; } /* Responsive - full width on mobile */ @media (max-width: 768px) { .mobile-frame { width: 100%; height: 800px; border-radius: 0; border: none; } }

Developed with Flutter 3.35 / Dart 3.9

This project is a cross-platform expense tracking app. Users can add and delete expenses, and quickly compare total expenses visually on the included chart. Check out the live Expense Tracker web app.

Theming

This app offers two unique UIs for Dark and Light theme user preferences.

Android Light/Dark Theme

Responsive

The app also support responsive UI adjustments, reorganizing elements for portrait and landscape orientations.

Adaptive

This app also demonstrates Adaptive UI adjustments, to give a more native experience if the user is viewing on Android or iOS.

Android v iOS

Testing

This project includes more expansive Widget Testing (component testing) to ensure elements continue to render and function properly with future updates.

Skills

  • Theming to support dark and light mode UIs
  • Modal Views for adding new expenses and alerting user of invalid input
  • Dismissible list items, to allow user to swipe an expense to remove it
  • Snackbar notifications to allow user to ‘undo’ when deleting an expense
  • Custom Chart Widget to visually display total expenses
  • Responsive UI to adjust UI elements for different screen sizes and rotations.
  • Adaptive UI to fine tune look for iOS vs Android
  • More in-depth Widget Testing (component testing) to test UI element functionality in both portrait and landscape renderings.
]]> 638