A modern Flutter application that provides an intuitive dashboard and management interface for the School Management System. This application connects to the Django REST API backend to provide real-time analytics and student management capabilities.
- Real-time Analytics
- Live student statistics with auto-refresh (30s interval)
- Interactive charts and visualizations
- Last update timestamp indicator
- Manual refresh option
-
Gender Distribution
- Interactive pie chart
- Percentage breakdowns
- Color-coded segments
- Animated transitions
-
Age Distribution
- Dynamic bar chart
- Interactive tooltips
- Age range analysis
- Count per age group
-
Grade Distribution
- Progress bar visualization
- Percentage calculations
- Grade-wise breakdown
- Color-coded indicators
-
Average Age per Grade
- Line chart visualization
- Trend analysis
- Interactive data points
- Grade progression insights
-
Student List
- Real-time search functionality
- Filterable student records
- Sortable columns
- Quick action buttons
-
Student Details
- Comprehensive profile view
- Editable information
- Contact details
- Academic records
- Material Design 3 implementation
- Responsive layout adaptation
- Dark/Light theme support
- Smooth animations and transitions
- Error handling with retry options
- Loading state indicators
- Flutter SDK (latest stable version)
- Dart SDK
- Android Studio / VS Code with Flutter plugins
- A running instance of the Django backend server
-
Clone the repository:
git clone <repository-url> cd school_management_app
-
Install dependencies:
flutter pub get
-
Configure the API endpoint:
- Open
lib/config/api_config.dart - Update the
baseUrlto match your Django backend:
class ApiConfig { static const String baseUrl = 'http://your-backend-url:8000/api'; }
- Open
-
Run the application:
flutter run
Update the API configuration in lib/config/api_config.dart:
class ApiConfig {
static const String baseUrl = 'http://localhost:8000/api';
static const int timeout = 30000; // milliseconds
static const bool enableLogging = true;
}Modify the theme in lib/config/theme.dart:
ThemeData lightTheme = ThemeData(
primaryColor: Colors.blue,
// ... other theme configurations
);lib/
├── config/
│ ├── api_config.dart
│ └── theme.dart
├── models/
│ └── student.dart
├── providers/
│ └── student_provider.dart
├── screens/
│ ├── dashboard_screen.dart
│ └── student_list_screen.dart
├── widgets/
│ ├── charts/
│ │ ├── age_distribution_chart.dart
│ │ ├── gender_distribution_chart.dart
│ │ └── grade_distribution_chart.dart
│ └── common/
│ ├── loading_indicator.dart
│ └── error_view.dart
└── main.dart
This application uses the Provider pattern for state management:
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => StudentProvider()),
// Other providers...
],
child: const MyApp(),
),
);
}Manages student data and provides methods for:
- Fetching student records
- Searching and filtering
- Statistical calculations
- Auto-refresh management
Built using fl_chart package:
- Pie charts for gender distribution
- Bar charts for age distribution
- Progress indicators for grade distribution
- Line charts for age trends
Automatically adapts to different screen sizes:
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) {
return WideLayout();
}
return NarrowLayout();
},
)- Lazy loading of student lists
- Caching of API responses
- Debounced search implementation
- Optimized chart rendering
- Memory-efficient image handling
The app includes comprehensive error handling:
- Network error recovery
- Data validation
- User feedback
- Graceful degradation
- Retry mechanisms
Run the tests using:
flutter testKey test areas:
- Widget tests for UI components
- Integration tests for API communication
- Unit tests for business logic
- Provider tests for state management
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request
-
API Connection Errors
- Verify backend server is running
- Check API configuration
- Confirm network connectivity
-
Chart Rendering Issues
- Ensure data format is correct
- Verify screen dimensions
- Check for null values
-
Performance Issues
- Enable performance overlay
- Check for memory leaks
- Optimize image assets
Key packages used:
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0
fl_chart: ^0.55.0
http: ^0.13.0
intl: ^0.17.0This project is licensed under the MIT License - see the LICENSE file for details.
- Flutter team for the framework
- Chart library contributors
- Design inspiration sources
- Community contributors
[Add your application screenshots here]
For support or queries, please contact:
- Email: [seunogunmolufirst1@gmail.com]
- GitHub Issues: [repository-issues-link]