here is my web flutter app, i want you to update the feel and look to make it look as modern a web app as possible rearange all the buttons and things to make it look better and delete any redundant buttons and extra things, also add cool looking designs icons and animations to make it look as good as possible. 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),
            ),
          ),
        );
      },
    );
  }
}