Flutter WEB Kakao Login Example

main.dart

import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'dart:html' as HTML;
import 'package:url_strategy/url_strategy.dart';


void main() {
  setPathUrlStrategy();
  runApp(Sys());
}

class Sys extends StatelessWidget {
  const Sys({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<MainController>(create: (BuildContext context) => MainController())
      ],
      child: MaterialApp(
        theme: ThemeData(
          colorScheme: ColorScheme.fromSwatch(
            accentColor: Colors.black12
          ),
        ),
        onGenerateRoute: (RouteSettings route){
          if(route.name.toString().indexOf(KAKAOPage.path) >= 0){
            return MaterialPageRoute(
              settings: RouteSettings(name: KAKAOPage.path),
              builder: (BuildContext context) => KAKAOPage()
            );
          }
          return MaterialPageRoute(
            settings: RouteSettings(name: MainPage.path),
            builder: (BuildContext context) => MainPage()
          );
        },
      ),
    );
  }
}

class PlatformWidget extends StatelessWidget {
  final Widget web;
  final Widget android;
  final Widget ios;
  const PlatformWidget({Key? key, required this.web, required this.android, required this.ios}) : super(key: key);

  @override
  Widget build(BuildContext context) => kIsWeb ? this.web : Platform.isAndroid ? this.android : this.ios;
}

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);
  static const String path = '/';
  @override
  Widget build(BuildContext context) {
    final MainController mainController = Provider.of<MainController>(context);
    return PlatformWidget(
      web: MainAndroidPage(mainController: mainController),
      android: MainAndroidPage(mainController: mainController),
      ios: Container()
    );
  }
}

class MainController with ChangeNotifier{
  final String reUrl = "";
  final String key = "";
  String connect() => "https://kauth.kakao.com/oauth/authorize?client_id=$key&redirect_uri=$reUrl&response_type=code";
  bool loginCheck = false;
  void login(){
    this.loginCheck = true;
    this.notifyListeners();
  }
}

class MainAndroidPage extends StatelessWidget {
  final MainController mainController;
  const MainAndroidPage({Key? key, required this.mainController}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("KakaOLoginCheck : ${mainController.loginCheck}")
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              child: Center(child: Text("KakaOLogin")),
              onPressed: () => HTML.window.location.href = mainController.connect(),
            ),
          ],
        ),
      )
    );
  }
}

class KAKAOPage extends StatelessWidget {
  const KAKAOPage({Key? key}) : super(key: key);
  static const String path = "/kakao";

  @override
  Widget build(BuildContext context) {
    MainController controller = Provider.of<MainController>(context);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              child: Text("완료"),
              onPressed: (){
                controller.login();
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
      ),
    );
  }
}