Flutter Profile Kit 👤

A comprehensive Flutter package for profile management UI components including profile image picker, user info forms, and location selection.

Features ✨

• 📸 Profile Image Picker: Beautiful circular avatar with floating add badge
• 📝 User Info Form: Comprehensive form for personal information
• 📍 Location Form: Location selection with country, city, and address fields
• 🎮 Smart Controller: Profile data management and validation
• 📱 Platform Adaptive: Automatically adapts to iOS and Android design patterns
• 🎨 Highly Customizable: Colors, spacing, sizing, and styling options
• ♿ Accessibility Ready: Proper semantic structure and screen reader support
• 🌍 Localization Ready: All text is customizable for different languages
• ⚡ Performance Optimized: Efficient image handling and form validation

Installation 📦

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_profile_kit: ^1.0.0

Then run:

flutter pub get

Usage 🚀

Profile Image Picker

import 'package:flutter_profile_kit/flutter_profile_kit.dart';

ProfileImagePicker(
  onImagePicked: (image) => setState(() => _profileImage = image),
  initialImage: _profileImage,
  avatarRadius: 96,
  badgeSize: 34,
  backgroundColor: Colors.grey.shade200,
  badgeColor: Colors.blue,
  placeholderIcon: Icons.person,
  enableCamera: true,
  enableGallery: true,
  imageQuality: 80,
)

User Info Form

UserInfoForm(
  onDataChanged: (data) => setState(() => _profileData = data),
  initialData: _profileData,
  requiredFields: [
    UserInfoField.firstName,
    UserInfoField.lastName,
    UserInfoField.email,
  ],
  fieldLabels: {
    UserInfoField.firstName: 'First Name',
    UserInfoField.lastName: 'Last Name',
    UserInfoField.email: 'Email Address',
  },
  fieldHints: {
    UserInfoField.firstName: 'Enter your first name',
    UserInfoField.lastName: 'Enter your last name',
    UserInfoField.email: 'Enter your email address',
  },
)

Location Form

LocationForm(
  onDataChanged: (data) => setState(() => _profileData = data),
  initialData: _profileData,
  requiredFields: [
    LocationField.country,
    LocationField.city,
  ],
  showAddressField: true,
  fieldLabels: {
    LocationField.country: 'Country',
    LocationField.governorate: 'State/Province',
    LocationField.city: 'City',
    LocationField.address: 'Address',
  },
)

Profile Controller

final controller = ProfileController(
  initialData: ProfileData(
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@example.com',
  ),
  requiredFields: [
    ProfileField.firstName,
    ProfileField.lastName,
    ProfileField.email,
  ],
  onDataChanged: (data) => print('Profile updated: $data'),
  onImageChanged: (image) => print('Image updated: $image'),
  onValidationChanged: (isValid) => print('Validation: $isValid'),
);

// Update profile data
controller.updateProfile(ProfileData(firstName: 'Jane'));

// Update specific field
controller.updateField(ProfileField.email, 'jane.doe@example.com');

// Update profile image
controller.updateProfileImage(File('/path/to/image.jpg'));

// Validate profile
if (controller.isValid) {
  print('Profile is valid');
} else {
  print('Validation errors: ${controller.validationErrors}');
}

Complete Profile Screen Example

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  late ProfileController _controller;
  ProfileData _profileData = const ProfileData();

  @override
  void initState() {
    super.initState();
    _controller = ProfileController(
      initialData: _profileData,
      onDataChanged: (data) => setState(() => _profileData = data),
      onImageChanged: (image) => print('Image changed: $image'),
      onValidationChanged: (isValid) => print('Valid: $isValid'),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Profile')),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // Profile Image Picker
            Padding(
              padding: EdgeInsets.all(32),
              child: ProfileImagePicker(
                onImagePicked: _controller.updateProfileImage,
                initialImage: _profileData.profileImage,
                avatarRadius: 80,
                badgeSize: 28,
              ),
            ),
            
            // User Info Form
            UserInfoForm(
              onDataChanged: _controller.updateProfile,
              initialData: _profileData,
              requiredFields: [
                UserInfoField.firstName,
                UserInfoField.lastName,
                UserInfoField.email,
              ],
            ),
            
            // Location Form
            LocationForm(
              onDataChanged: _controller.updateProfile,
              initialData: _profileData,
              requiredFields: [
                LocationField.country,
                LocationField.city,
              ],
              showAddressField: true,
            ),
            
            // Save Button
            Padding(
              padding: EdgeInsets.all(16),
              child: ElevatedButton(
                onPressed: _controller.isValid ? _saveProfile : null,
                child: Text('Save Profile'),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _saveProfile() {
    // Save profile logic
    print('Saving profile: $_profileData');
  }
}

Customization 🎨

Profile Image Picker Styling

ProfileImagePicker(
  avatarRadius: 120,
  badgeSize: 40,
  backgroundColor: Colors.blue.shade50,
  badgeColor: Colors.blue,
  placeholderIcon: Icons.account_circle,
  placeholderIconSize: 60,
  placeholderIconColor: Colors.blue,
  badgeIcon: Icons.camera_alt,
  badgeIconSize: 24,
  badgeIconColor: Colors.white,
  badgeAngle: 45,
  borderWidth: 3,
  borderColor: Colors.blue,
  shadowColor: Colors.blue.withOpacity(0.3),
  shadowBlurRadius: 12,
  shadowOffset: Offset(0, 6),
)

Form Styling

UserInfoForm(
  padding: EdgeInsets.all(24),
  fieldSpacing: 20,
  fieldHeight: 65,
  borderRadius: 16,
  backgroundColor: Colors.white,
  borderColor: Colors.grey.shade300,
  focusedBorderColor: Colors.blue,
  errorBorderColor: Colors.red,
  textColor: Colors.black87,
  hintColor: Colors.grey.shade600,
  errorColor: Colors.red,
  labelColor: Colors.black87,
  textStyle: TextStyle(fontSize: 16),
  hintStyle: TextStyle(fontSize: 14),
  labelStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
  errorStyle: TextStyle(fontSize: 12),
)

Widgets 📱

ProfileImagePicker

Beautiful profile image picker with circular avatar, floating add badge, and image selection options.

UserInfoForm

Comprehensive form for collecting user information with validation and customizable styling.

LocationForm

Location selection form with country, governorate, city, and address fields.

ProfileData

Data model for user profile information with validation and utility methods.

ProfileController

Controller for managing profile data, validation, and form state.

Dependencies 📋

• flutter: SDK
• flutter_platform_widgets: Platform-adaptive widgets
• image_picker: Image selection functionality
• flutter_svg: SVG icon support

Contributing 🤝

Contributions are welcome! Please feel free to submit a Pull Request.

License 📄

This project is licensed under the MIT License - see the LICENSE file for details.

Support 💬

If you encounter any problems or have suggestions, please file an issue at the GitHub repository.

---

Made with ❤️ by seifmoustafa