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