[移动开发]flutter 一键登录的界面

import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'DialogRouter.dart';
import 'LoadingDialog.dart';
import 'MusicPlayer.dart';
import 'OneClick.dart';

//一键登录界面
//这里跳转界面要注意：外层使用StatelessWidget，将路由跳转功能封装到StatefulWidget中，否则会报错
class Login extends StatelessWidget {
  const Login({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: LoginRoute());
  }
}

class LoginRoute extends StatefulWidget {
  const LoginRoute({Key? key}) : super(key: key);

  @override
  //状态
  LoginRouteState createState() => LoginRouteState();
}

class LoginRouteState extends State<LoginRoute> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    clearPrefs();
  }

  //数据缓存获取token
  // token() async{
  //   SharedPreferences prefs = await SharedPreferences.getInstance();
  //   String? tokens = prefs.getString("token");
  //   print("token $tokens");
  // }

  clearPrefs() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.clear();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Container(
        //设置界面背景
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/base_widgets/bg_sign_in.png"),
            fit: BoxFit.cover,
          ),
        ),
        //Align是对齐布局，有各种排放属性
        child: Align(
            //一键登录按键放在最底下的中间
            alignment: FractionalOffset.bottomCenter,
            //包裹一个监听者才能让一些没有点击监听的控件有监听效果
            child: GestureDetector(
                //轻触后跳转界面
                onTap: () {
                  //弹窗
                  Navigator.push(context, DialogRouter(LoadingDialog(true)));
                  //跳转到首页
                  LoginNavigator();
                },
                child: Container(
                  decoration: const BoxDecoration(
                      color: Colors.pink,
                      borderRadius: BorderRadius.all(Radius.circular(50.0))),
                  margin: const EdgeInsets.only(bottom: 170),
                  height: 55,
                  width: 310,
                  padding:
                      const EdgeInsets.only(top: 17, left: 120, bottom: 17),
                  child: const Text(
                    '一键登录',
                    style: TextStyle(color: Colors.white, fontSize: 18),
                  ),
                ))),
      ),
    ));
  }

  //一键登录的跳转
  LoginNavigator() async {
    // String sign = "123456" + "andr1" + "981295955" + "meet";
    // //请求头
    // Options options = Options(headers: {
    //   "XX-Device-Type": "android",
    //   "ML-Uuid": "123456",
    //   "ML-Key": "andr1",
    //   "ML-Ts": "981295955",
    //   "ML-Package": "Music",
    //   "ML-App-Version": "200",
    //   "ML-Api-Version": "v2",
    //   "lang": "en",
    //   "channel": "Music",
    //   "ML-Sign": sign
    // });
    //
    // var apiUrl = "http://mltest.mila.chat/api/v2/public/oneClickLogin";

    //参数
    // Map map = {};
    //
    // map["type"] = "5";
    // map["source"] = "android";
    //
    // Response result = await Dio().post(apiUrl, data: map, options: options);
    // if (result.statusCode == 200) {
      //如果接口请求成功就跳转到首页且关闭当前页面
      Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(builder: (context) => const MusicPlayer()),
        (route) => route == null,
      );
    // } else {
    //   print("登录失败");
    // }

    //json解析
    // Map<String, dynamic> userMap = json.decode(result.toString());
    // var user = OneClick.fromJson(userMap);
    //
    // //数据缓存写入token值
    // SharedPreferences prefs = await SharedPreferences.getInstance();
    // await prefs.setString('token', user.data.token);
    //
    // //print用法
    // print(
    //     "token为${user.data.token},id为${user.data.user.id}, 余额为${user.data.user.coin},");
  }
}