here is my flutter web app, i want you to significantly improve the look and feel of the web app, make it use all currently used and upto date visuals and things to make it look amazing and super simple to use. import 'dart:io';

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:table_calendar/table_calendar.dart';
import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;

const String dataFilePath = 'lib/data.json';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Facility Hours',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.teal,
          primary: Colors.teal,
          secondary: Colors.blue.shade300,
          background: Colors.teal.shade50,
        ),
        useMaterial3: true,
        fontFamily: 'Inter',
      ),
      home: const DateInfoPage(),
    );
  }
}

class DateInfoPage extends StatefulWidget {
  const DateInfoPage({super.key});

  @override
  State createState() => _DateInfoPageState();
}

class _DateInfoPageState extends State<DateInfoPage> {
  List<dynamic> _data = [];
  DateTime _selectedDay = DateTime.now();
  DateTime _focusedDay = DateTime.now();
  final CalendarFormat _calendarFormat = CalendarFormat.month;
  String _selectedFacility = 'Gym';
  List<String> _facilities = [];
  bool _showCalendar = true;

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  Future<void> _loadData() async {
    try {
      String jsonString = await rootBundle.loadString(dataFilePath);
      final List<dynamic> jsonData = json.decode(jsonString);
      setState(() {
        _data = jsonData;
        _facilities = _data
            .map((event) => event['facilityname'] as String)
            .toSet()
            .toList();
        if (!_facilities.contains(_selectedFacility)) {
          _selectedFacility = _facilities.isNotEmpty ? _facilities[0] : 'Gym';
        }
      });
    } catch (e) {
      print('Error loading data: $e');
      setState(() {
        _data = [];
        _facilities = ['Gym'];
        _selectedFacility = 'Gym';
      });
    }
  }

  List<dynamic> _getEventsForDay(DateTime day) {
    return _data.where((event) {
      final eventStart = DateTime.parse(event['start']).toUtc();
      final dayUtc = DateTime.utc(day.year, day.month, day.day);
      return isSameDay(eventStart, dayUtc) &&
          event['facilityname'] == _selectedFacility;
    }).toList();
  }

  String _formatTime(String dateTimeString) {
    final dateTime = DateTime.parse(dateTimeString);
    return DateFormat('h:mm a').format(dateTime);
  }

  String _calculateDuration(String start, String end) {
    final startTime = DateTime.parse(start);
    final endTime = DateTime.parse(end);
    final duration = endTime.difference(startTime);
    final hours = duration.inHours;
    final minutes = duration.inMinutes % 60;
    return '${hours}h ${minutes}m';
  }

  void _showEventDetails(dynamic event) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('${event['title']} Details'),
          content: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                  'Date: ${DateFormat('yyyy-MM-dd').format(DateTime.parse(event['start']))}'),
              Text('Facility: ${event['facilityname']}'),
              Text('Start: ${_formatTime(event['start'])}'),
              Text('End: ${_formatTime(event['end'])}'),
              Text(
                  'Duration: ${_calculateDuration(event['start'], event['end'])}'),
              if (event['description'] != null &&
                  event['description'].isNotEmpty)
                Text('Description: ${event['description']}'),
            ],
          ),
          actions: [
            TextButton(
              child: const Text('Close'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  Widget _buildCalendar() {
    return TableCalendar(
      firstDay: DateTime.utc(2024, 1, 1),
      lastDay: DateTime.utc(2024, 12, 31),
      focusedDay: _focusedDay,
      selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
      calendarFormat: _calendarFormat,
      eventLoader: _getEventsForDay,
      onDaySelected: (selectedDay, focusedDay) {
        setState(() {
          _selectedDay = selectedDay;
          _focusedDay = focusedDay;
        });
      },
      onPageChanged: (focusedDay) {
        _focusedDay = focusedDay;
      },
      headerStyle: HeaderStyle(
        formatButtonVisible: false,
        titleCentered: true,
        titleTextStyle: TextStyle(
          color: Theme.of(context).colorScheme.primary,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
      calendarStyle: CalendarStyle(
        todayDecoration: BoxDecoration(
          color: Theme.of(context).colorScheme.secondary.withOpacity(0.5),
          shape: BoxShape.circle,
        ),
        selectedDecoration: BoxDecoration(
          color: Theme.of(context).colorScheme.primary,
          shape: BoxShape.circle,
        ),
        weekendTextStyle: const TextStyle(color: Colors.black),
      ),
      calendarBuilders: CalendarBuilders(
        markerBuilder: (context, date, events) {
          if (events.isNotEmpty) {
            return Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Theme.of(context).colorScheme.secondary,
              ),
              width: 8.0,
              height: 8.0,
            );
          }
          return null;
        },
      ),
    );
  }

  Widget _buildTileList() {
    final selectedMonth = _selectedDay.month;
    final eventsForMonth = _data.where((event) {
      final eventDate = DateTime.parse(event['start']);
      return eventDate.month == selectedMonth &&
          event['facilityname'] == _selectedFacility;
    }).toList();

    if (eventsForMonth.isEmpty) {
      return const Center(child: Text('No events scheduled for this month.'));
    }

    return ListView.builder(
      itemCount: eventsForMonth.length,
      itemBuilder: (context, index) {
        final event = eventsForMonth[index];
        return Card(
          elevation: 4,
          margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: ListTile(
            title: Text(
              '${_formatTime(event['start'])} - ${_formatTime(event['end'])}',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Theme.of(context).colorScheme.primary,
              ),
            ),
            subtitle: Text(
              '${event['title']} - ${event['facilityname']}',
              style: TextStyle(
                color: Theme.of(context).colorScheme.secondary,
              ),
            ),
            onTap: () => _showEventDetails(event),
            tileColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
          ),
        );
      },
    );
  }

  void _toggleView() {
    setState(() {
      _showCalendar = !_showCalendar;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$_selectedFacility Hours'),
        centerTitle: true,
        backgroundColor: Theme.of(context).colorScheme.primary,
        foregroundColor: Colors.white,
        actions: [
          DropdownButton<String>(
            value: _selectedFacility,
            onChanged: (String? newValue) {
              if (newValue != null) {
                setState(() {
                  _selectedFacility = newValue;
                });
              }
            },
            items: _facilities.map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
        ],
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Theme.of(context).colorScheme.background,
              Colors.white,
            ],
          ),
        ),
        child: Column(
          children: [
            ElevatedButton(onPressed: _toggleView, child: Text(_showCalendar ? 'Show List' : 'Show Calendar')),
            Expanded(
              child: _showCalendar
                  ? Column(
                      children: [
                        _buildCalendar(),
                        const SizedBox(height: 16),
                        Expanded(child: _buildEventList()),
                      ],
                    )
                  : _buildTileList(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildEventList() {
    List<dynamic> eventsForSelectedDay = _getEventsForDay(_selectedDay);

    if (eventsForSelectedDay.isEmpty) {
      return const Center(child: Text('No events scheduled for this day.'));
    }

    return ListView.builder(
      itemCount: eventsForSelectedDay.length,
      itemBuilder: (context, index) {
        final event = eventsForSelectedDay[index];
        return Card(
          elevation: 4,
          margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: ListTile(
            title: Text(
              '${_formatTime(event['start'])} - ${_formatTime(event['end'])}',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Theme.of(context).colorScheme.primary,
              ),
            ),
            subtitle: Text(
              'Duration: ${_calculateDuration(event['start'], event['end'])}',
              style: TextStyle(
                color: Theme.of(context).colorScheme.secondary,
              ),
            ),
            onTap: () => _showEventDetails(event),
            tileColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
          ),
        );
      },
    );
  }
}