isekai_wiki_app/lib/pages/welcome_page.dart

import 'package:flutter/cupertino.dart';
import 'package:get/get.dart';
import 'package:isekai_wiki/components/isekai_page_scaffold.dart';
import 'package:isekai_wiki/global.dart';
import 'package:isekai_wiki/utils/dialog.dart';
import 'package:roundcheckbox/roundcheckbox.dart';

class WelcomePageController extends GetxController {
  var isLoading = false.obs;

  var policyAccepted = false.obs;

  void handleClickPolicyLink() {
    openUrl(Global.privacyPolicyUrl, inApp: false);
  }
}

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

  Widget _buildTitleImage(BuildContext context, WelcomePageController c) {
    return Center(
      child: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(10)),
        child: Image.asset("images/title.png"),
      ),
    );
  }

  Widget _buildSiteTitle(BuildContext context, WelcomePageController c) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        MediaQuery(
          data: MediaQueryData(textScaleFactor: 1),
          child: Text(
            Global.siteTitle,
            style: TextStyle(fontSize: 48),
          ),
        ),
        Text(Global.siteDescription),
      ],
    );
  }

  Widget _buildActions(BuildContext context, WelcomePageController c) {
    var theme = CupertinoTheme.of(context);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: () {
            c.policyAccepted.value = !c.policyAccepted.value;
          },
          child: Row(
            children: [
              Obx(
                () => RoundCheckBox(
                  size: 30,
                  isChecked: c.policyAccepted.value,
                  onTap: (checked) {
                    c.policyAccepted.value = checked ?? false;
                  },
                  animationDuration: Duration.zero,
                  checkedColor: theme.primaryColor,
                ),
              ),
              const SizedBox(
                width: 10,
              ),
              const Text("已阅读并同意"),
              CupertinoButton(
                padding: EdgeInsets.zero,
                onPressed: c.handleClickPolicyLink,
                child: const Text("隐私政策"),
              )
            ],
          ),
        ),
        const SizedBox(
          height: 18,
        ),
        Obx(
          () => CupertinoButton.filled(
            disabledColor: theme.primaryColor.withOpacity(0.6),
            onPressed: c.policyAccepted.value && !c.isLoading.value
                ? () {
                    c.isLoading.value = true;
                    Future.delayed(const Duration(seconds: 5)).then((value) {
                      c.isLoading.value = false;
                    });
                  }
                : null,
            child: const Text("继续"),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    var c = Get.put(WelcomePageController());

    return IsekaiPageScaffold(
      backgroundColor: CupertinoColors.white,
      child: SafeArea(
        child: OrientationBuilder(
          builder: (context, orientation) => Padding(
            padding: orientation == Orientation.portrait
                ? const EdgeInsets.only(
                    top: 32, right: 20, bottom: 32, left: 20)
                : const EdgeInsets.symmetric(horizontal: 20, vertical: 32),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Flexible(
                  child: orientation == Orientation.portrait
                      ? Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Flexible(
                              flex: 1,
                              child: ConstrainedBox(
                                constraints: BoxConstraints(
                                    maxHeight:
                                        MediaQuery.of(context).size.width *
                                            0.75),
                                child: _buildTitleImage(context, c),
                              ),
                            ),
                            const SizedBox(height: 12),
                            Flexible(
                              flex: 0,
                              child: Padding(
                                padding: const EdgeInsets.symmetric(
                                    vertical: 24, horizontal: 8),
                                child: _buildSiteTitle(context, c),
                              ),
                            ),
                          ],
                        )
                      : Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Flexible(
                              flex: 1,
                              child: ConstrainedBox(
                                constraints: BoxConstraints(
                                    maxHeight:
                                        MediaQuery.of(context).size.width *
                                            9 /
                                            16),
                                child: _buildTitleImage(context, c),
                              ),
                            ),
                            const SizedBox(width: 48),
                            Flexible(
                              flex: 1,
                              child: _buildSiteTitle(context, c),
                            ),
                          ],
                        ),
                ),
                const SizedBox(height: 36),
                _buildActions(context, c),
              ],
            ),
          ),
        ),
      ),
    );
  }
}