Aplikasi Flutter Web dengan Integrasi Google Maps dan WhatsApp untuk SMKN 1 Banjar

 import 'dart:ui' as ui;

import 'package:flutter/material.dart';

import 'dart:html' as html;

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'SMKN 1 Banjar',

      theme: ThemeData(

        primarySwatch: Colors.indigo,

        scaffoldBackgroundColor: Colors.grey[50],

        textTheme: const TextTheme(

          bodyMedium: TextStyle(fontSize: 16),

        ),

      ),

      home: const HomeScreen(),

      debugShowCheckedModeBanner: false,

    );

  }

}

class HomeScreen extends StatelessWidget {

  const HomeScreen({super.key});

  @override

  Widget build(BuildContext context) {

    const String viewID = 'google-maps-iframe';

    const String mapEmbedUrl =

        'https://maps.google.com/maps?q=-7.370330346793185,108.52705617634716&z=15&output=embed';

    // Daftarkan iframe Google Maps

    ui.platformViewRegistry.registerViewFactory(viewID, (int viewId) {

      return html.IFrameElement()

        ..src = mapEmbedUrl

        ..style.border = 'none';

    });

    return Scaffold(

      appBar: AppBar(

        title: const Text('SMKN 1 Banjar'),

        actions: [

          TextButton(

            onPressed: () {},

            child: const Text('Beranda', style: TextStyle(color: Colors.white)),

          ),

          TextButton(

            onPressed: () {},

            child: const Text('Profil', style: TextStyle(color: Colors.white)),

          ),

          TextButton(

            onPressed: () {},

            child: const Text('Jurusan', style: TextStyle(color: Colors.white)),

          ),

          TextButton(

            onPressed: () {},

            child: const Text('Kontak', style: TextStyle(color: Colors.white)),

          ),

        ],

      ),

      body: Stack(

        children: [

          Center(

            child: Container(

              constraints: const BoxConstraints(maxWidth: 800),

              padding: const EdgeInsets.all(24.0),

              child: Column(

                crossAxisAlignment: CrossAxisAlignment.center,

                children: [

                  const Text(

                    'SMK Negeri 1 Banjar',

                    style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),

                  ),

                  const SizedBox(height: 10),

                  const Text(

                    'Sekolah Menengah Kejuruan unggulan di Kota Banjar dengan berbagai jurusan seperti RPL, Pemasaran, DKV, dan lainnya.',

                    textAlign: TextAlign.center,

                  ),

                  const SizedBox(height: 24),

                  // Google Maps Embed

                  const SizedBox(

                    width: 700,

                    height: 400,

                    child: HtmlElementView(viewType: viewID),

                  ),

                  const SizedBox(height: 24),

                  ElevatedButton.icon(

                    onPressed: () {

                      html.window.open(

                        'https://www.google.com/maps/dir/?api=1&destination=-7.370330346793185,108.52705617634716',

                        '_blank',

                      );

                    },

                    icon: const Icon(Icons.directions),

                    label: const Text('Rute ke Sekolah'),

                  ),

                  const SizedBox(height: 12),

                  ElevatedButton.icon(

                    onPressed: () {

                      html.window.open(

                        'https://wa.me/6281234567890?text=Halo%20SMKN%201%20Banjar%2C%20saya%20ingin%20bertanya%20mengenai%20PPDB.',

                        '_blank',

                      );

                    },

                    icon: const Icon(Icons.message), // Ganti dari Icons.whatsapp yang error

                    label: const Text('Hubungi via WhatsApp'),

                    style: ElevatedButton.styleFrom(

                      backgroundColor: Colors.green,

                      foregroundColor: Colors.white,

                    ),

                  ),

                ],

              ),

            ),

          ),

          // 🔽 Floating WhatsApp Button

          Positioned(

            bottom: 20,

            right: 20,

            child: GestureDetector(

              onTap: () {

                html.window.open(

                  'https://wa.me/6281234567890?text=Halo%20SMKN%201%20Banjar%2C%20saya%20ingin%20bertanya%20mengenai%20PPDB.',

                  '_blank',

                );

              },

              child: Container(

                width: 60,

                height: 60,

                decoration: const BoxDecoration(

                  color: Color(0xFF25D366),

                  shape: BoxShape.circle,

                  boxShadow: [

                    BoxShadow(

                      color: Colors.black26,

                      blurRadius: 5,

                      offset: Offset(2, 2),

                    ),

                  ],

                ),

                child: Center(

                  child: Image.network(

                    'https://cdn-icons-png.flaticon.com/512/733/733585.png',

                    width: 32,

                    height: 32,

                  ),

                ),

              ),

            ),

          )

        ],

      ),

    );

  }

}