98 lines
3.1 KiB
Markdown
98 lines
3.1 KiB
Markdown
# TaskTracker - Authentication UI
|
|
|
|
This Flutter application features a beautiful Material Design authentication system with OAuth support for Google, Facebook, and GitHub.
|
|
|
|
## Features
|
|
|
|
### 🎨 Material Design 3
|
|
- Modern Material Design 3 components
|
|
- Custom color scheme with indigo primary color
|
|
- Google Fonts (Poppins) for typography
|
|
- Smooth animations and transitions
|
|
|
|
### 🔐 Authentication Screens
|
|
- **Login Screen**: Email/password authentication with form validation
|
|
- **Register Screen**: User registration with password confirmation and terms agreement
|
|
- **Tab-based Navigation**: Smooth switching between login and register modes
|
|
|
|
### 🌐 OAuth Integration Ready
|
|
- **Google OAuth**: Styled button with Google branding
|
|
- **Facebook OAuth**: Styled button with Facebook branding
|
|
- **GitHub OAuth**: Styled button with GitHub branding
|
|
- Ready for Appwrite integration
|
|
|
|
### 📱 UI Components
|
|
|
|
#### Custom Text Fields
|
|
- Material Design 3 styling
|
|
- Form validation with error states
|
|
- Password visibility toggle
|
|
- Icon prefixes and suffixes
|
|
- Proper focus states and animations
|
|
|
|
#### OAuth Buttons
|
|
- Provider-specific colors and icons
|
|
- Consistent styling across all providers
|
|
- Hover and press states
|
|
- Accessibility support
|
|
|
|
#### Form Validation
|
|
- Email format validation
|
|
- Password strength requirements
|
|
- Password confirmation matching
|
|
- Terms and conditions agreement
|
|
- Real-time validation feedback
|
|
|
|
## File Structure
|
|
|
|
```
|
|
lib/
|
|
├── main.dart # App entry point with Material 3 theming
|
|
├── screens/
|
|
│ ├── auth_screen.dart # Main authentication container with tabs
|
|
│ ├── login_screen.dart # Login form with validation
|
|
│ └── register_screen.dart # Registration form with validation
|
|
└── widgets/
|
|
├── custom_text_field.dart # Reusable text input component
|
|
└── oauth_button.dart # OAuth provider buttons
|
|
```
|
|
|
|
## Dependencies
|
|
|
|
- `google_fonts: ^6.2.1` - For Poppins font family
|
|
- `flutter_svg: ^2.0.10+1` - For SVG icon support (ready for OAuth icons)
|
|
|
|
## Integration with Appwrite
|
|
|
|
The UI is designed to work seamlessly with Appwrite authentication. To integrate:
|
|
|
|
1. Add Appwrite SDK to `pubspec.yaml`
|
|
2. Replace the TODO comments in login/register methods with actual Appwrite calls
|
|
3. Implement OAuth handlers for Google, Facebook, and GitHub
|
|
4. Add proper error handling and success navigation
|
|
|
|
## Usage
|
|
|
|
Run the app to see the authentication UI:
|
|
|
|
```bash
|
|
flutter run
|
|
```
|
|
|
|
The app will display a beautiful authentication screen with login and register tabs, complete with OAuth buttons and form validation.
|
|
|
|
## Customization
|
|
|
|
- **Colors**: Modify the `seedColor` in `main.dart` to change the primary color
|
|
- **Fonts**: Change the font family in the theme configuration
|
|
- **Styling**: Adjust border radius, padding, and other design tokens in the theme
|
|
- **OAuth Providers**: Add or remove OAuth providers by modifying the button lists
|
|
|
|
## Next Steps
|
|
|
|
1. Integrate with Appwrite SDK
|
|
2. Add proper navigation after successful authentication
|
|
3. Implement forgot password functionality
|
|
4. Add loading states and error handling
|
|
5. Implement biometric authentication (optional)
|