AddTeamScreen

​

Overview

​

Purpose

• Create new teams with custom names and descriptions
• Select team colors for visual organization
• Search and add initial team members
• Automatically include the creator as a team member

​

Key Components

​

State Variables

​

Key Methods

​

_searchUsers()

void _searchUsers() async {
  if (_searchQuery.isNotEmpty) {
    final results = await _authService.searchUsersByNameOrEmail(_searchQuery);
    setState(() {
      _searchResults = results;
    });
  } else {
    setState(() {
      _searchResults = [];
    });
  }
}

​

_createTeam()

Future<void> _createTeam() async {
  if (_teamName.isNotEmpty && _projectDescription.isNotEmpty) {
    try {
      User? currentUser = FirebaseAuth.instance.currentUser;
      if (currentUser != null) {
        List<String> allMembers =
            _selectedMembers.map((member) => member.uid).toList();

        // Ensure current user is included
        if (!allMembers.contains(currentUser.uid)) {
          allMembers.add(currentUser.uid);
        }

        final teamId = await _teamService.createTeam(
          _teamName,
          _projectDescription,
          _selectedColor,
          allMembers,
        );

        if (teamId != null) {
          if (mounted) {
            Navigator.pop(context, true);
          }
        }
      }
    } catch (e) {
      _logger.e('Error creating team: $e');
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('Error al crear el equipo')),
        );
      }
    }
  }
}

​

_selectColor()

void _selectColor(Color color) {
  setState(() {
    _selectedColor = color;
  });
}

​

_addMemberToTeam()

void _addMemberToTeam(UserProfile user) {
  setState(() {
    if (!_selectedMembers.contains(user)) {
      _selectedMembers.add(user);
    }
  });
}

​

UI Structure

​

Team Configuration Section

1. Team Name Input - Required text field for team name
2. Project Description - Required text field for team description
3. Color Picker - Visual color selection grid

​

Member Search Section

1. Search Bar - TextField for searching users by name or email
2. Search Results - ListView displaying matching users
3. Selected Members - Chips showing currently selected members

​

Available Colors

• Blue
• Green
• Red
• Orange
• Purple
• Pink
• Yellow
• Brown

​

Data Flow

​

Validation

​

Required Fields

• Team Name: Must not be empty
• Project Description: Must not be empty

​

Auto-corrections

• Current user automatically added to members list if not already included
• Prevents duplicate member additions

​

Team Data Structure

{
  "name": "Team Name",
  "description": "Project description",
  "color": 4280391411, // Color value
  "members": ["uid1", "uid2", "uid3"],
  "userId": "creator_uid",
  "createdAt": Timestamp
}

​

Error Handling

• Empty field validation with SnackBar messages
• Team creation errors logged and displayed
• Network errors handled gracefully
• Mounted checks before navigation and UI updates

​

Best Practices

1. Always Include Creator: Ensure the team creator is in the members list
2. Validate Before Submit: Check all required fields
3. Clear Search: Reset search results when query is empty
4. User Feedback: Show loading indicators and error messages
5. Return Status: Pass true back to caller on successful creation

​

Related Components