H5_Flutter/lib/view/guide.dart

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:link/constants.dart';
import 'package:link/view/component/link_btn.dart';

import '../utils/size_fit.dart';

class IndexWelcome extends StatelessWidget {
  var close;
  IndexWelcome({Key? key,required this.close}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    var size = MediaQuery.of(context).size;
    return BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
        child: Container(
          width: 375.px,
          height: size.height,
          color: const Color(0xBF000000),
          alignment: Alignment.center,
          child: Container(
            width: 314.px,
            height: 414.px,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(32.px),
                boxShadow: [
                  BoxShadow(
                      color: const Color(0x66000000),
                      blurRadius: 24.px,
                      offset: Offset(0, 24.px))
                ],
                color: const Color(0xFF131314)),
            child: Stack(children: [
              Image.asset(
                'assets/images/guide_begin.png',
                width: 314.px,
                height: 130.px,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(
                    height: 40.px,
                    width: 314.px,
                  ),
                  Text(
                    '欢迎加入',
                    style: TextStyle(
                        color: kThemeColor,
                        fontSize: 24.px,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 16.px,
                  ),
                  Image.asset(
                    'assets/images/logo.png',
                    width: 216.px,
                    height: 83.px,
                  ),
                  SizedBox(
                    height: 24.px,
                  ),
                  Text(
                    '将自己的各平台汇聚于此，丰富的\n主题彰显你独特的个性，分享给你\n的好友，全网找你不迷路',
                    style: TextStyle(
                        color: const Color(0xFFA5A5AD), fontSize: 14.px,height: 1.8),
                  ),
                  SizedBox(
                    height: 36.px,
                  ),
                  LinkButton(
                      title: '开始探索',
                      disable: false,
                      isBlack: false,
                      btnWidth: 216.px,
                      callback: () {
                        close();
                      })
                ],
              )
            ]),
          ),
        ));
  }
}

class GuideTip extends StatelessWidget {
  String content;
  int direction;
  double width;
  GuideTip(
      {Key? key,
      required this.content,
      required this.direction,
      required this.width})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      padding: EdgeInsets.fromLTRB(26.px, 20.px, 26.px, 20.px),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(28.px),
          color: const Color(0xFF0000FF),
          boxShadow: [
            BoxShadow(
                color: const Color(0x66000000),
                offset: Offset(0.0, 24.px),
                blurRadius: 24.px)
          ]),
      child: Text(
        content,
        style: TextStyle(
            color: Colors.white, fontSize: 20.px, fontWeight: FontWeight.bold,height: 1.8),
      ),
    );
  }
}