本节目标

  • 第一次登录显示欢迎界面
  • 离线登录
  • Provider 响应数据管理
  • 实现 APP 色彩灰度处理
  • 注销登录
  • Http Status 401 认证授权
  • 首页磁盘缓存
  • 首页缓存策略，延迟 1~3 秒
  • 首页骨架屏

视频

代码

https://github.com/ducafecat/flutter_learn_news/releases/tag/v1.0.7

视频

资源

第一次显示欢迎界面、离线登录

  • lib/global.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/// 是否第一次打开
static bool isFirstOpen = false;

/// 是否离线登录
static bool isOfflineLogin = false;

/// init
static Future init() async {
  ...

  // 读取设备第一次打开
  isFirstOpen = !StorageUtil().getBool(STORAGE_DEVICE_ALREADY_OPEN_KEY);
  if (isFirstOpen) {
    StorageUtil().setBool(STORAGE_DEVICE_ALREADY_OPEN_KEY, true);
  }

  // 读取离线用户信息
  var _profileJSON = StorageUtil().getJSON(STORAGE_USER_PROFILE_KEY);
  if (_profileJSON != null) {
    profile = UserLoginResponseEntity.fromJson(_profileJSON);
    isOfflineLogin = true;
  }
  • lib/pages/index/index.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class IndexPage extends StatefulWidget {
  IndexPage({Key key}) : super(key: key);

  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(
      context,
      width: 375,
      height: 812 - 44 - 34,
      allowFontScaling: true,
    );

    return Scaffold(
      body: Global.isFirstOpen == true
          ? WelcomePage()
          : Global.isOfflineLogin == true ? ApplicationPage() : SignInPage(),
    );
  }
}

Provider 实现动态灰度处理

https://pub.flutter-io.cn/packages/provider

步骤 1：安装依赖

1
2
dependencies:
  provider: ^4.0.4

步骤 2：创建响应数据类

  • lib/common/provider/app.dart
1
2
3
4
5
6
7
8
9
10
11
12
import 'package:flutter/material.dart';

/// 系统相应状态
class AppState with ChangeNotifier {
  bool _isGrayFilter;

  get isGrayFilter => _isGrayFilter;

  AppState({bool isGrayFilter = false}) {
    this._isGrayFilter = isGrayFilter;
  }
}

步骤 3：初始响应数据

方式一：先创建数据对象，再挂载

  • lib/global.dart
1
2
/// 应用状态
static AppState appState = AppState();
  • lib/main.dart
1
2
3
4
5
6
7
8
9
10
void main() => Global.init().then((e) => runApp(
      MultiProvider(
        providers: [
          ChangeNotifierProvider<AppState>.value(
            value: Global.appState,
          ),
        ],
        child: MyApp(),
      ),
    ));

方式二：挂载时，创建对象

  • lib/main.dart
1
2
3
4
5
6
7
8
9
10
void main() => Global.init().then((e) => runApp(
      MultiProvider(
        providers: [
          ChangeNotifierProvider<AppState>(
            Create: (_) => new AppState(),
          ),
        ],
        child: MyApp(),
      ),
    ));

步骤 4：通知数据发声变化

  • lib/common/provider/app.dart
1
2
3
4
5
6
7
8
9
class AppState with ChangeNotifier {
  ...

  // 切换灰色滤镜
  switchGrayFilter() {
    _isGrayFilter = !_isGrayFilter;
    notifyListeners();
  }
}

步骤 5：收到数据发声变化

方式一：Consumer

  • lib/main.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
void main() => Global.init().then((e) => runApp(
      MultiProvider(
        providers: [
          ChangeNotifierProvider<AppState>.value(
            value: Global.appState,
          ),
        ],
        child: Consumer<AppState>(builder: (context, appState, _) {
          if (appState.isGrayFilter) {
            return ColorFiltered(
              colorFilter: ColorFilter.mode(Colors.white, BlendMode.color),
              child: MyApp(),
            );
          } else {
            return MyApp();
          }
        }),
      ),
    ));

方式二：Provider.of

  • lib/pages/account/account.dart
1
2
3
4
5
6
7
8
9
10
11
12
final appState = Provider.of<AppState>(context);

return Column(
  children: <Widget>[
    MaterialButton(
      onPressed: () {
        appState.switchGrayFilter();
      },
      child: Text('灰色切换 ${appState.isGrayFilter}'),
    ),
  ],
);

多个响应数据处理

  • 挂载用 MultiProvider

  • 接收用 Consumer2 ~ Consumer6

注销登录

  • lib/common/utils/authentication.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/// 检查是否有 token
Future<bool> isAuthenticated() async {
  var profileJSON = StorageUtil().getJSON(STORAGE_USER_PROFILE_KEY);
  return profileJSON != null ? true : false;
}

/// 删除缓存 token
Future deleteAuthentication() async {
  await StorageUtil().remove(STORAGE_USER_PROFILE_KEY);
  Global.profile = null;
}

/// 重新登录
Future goLoginPage(BuildContext context) async {
  await deleteAuthentication();
  Navigator.pushNamedAndRemoveUntil(
      context, "/sign-in", (Route<dynamic> route) => false);
}
  • lib/pages/account/account.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class _AccountPageState extends State<AccountPage> {
  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<AppState>(context);

    return Column(
      children: <Widget>[
        Text('用户: ${Global.profile.displayName}'),
        Divider(),
        MaterialButton(
          onPressed: () {
            goLoginPage(context);
          },
          child: Text('退出'),
        ),
      ],
    );
  }
}

Http Status 401 认证授权

dio 封装界面的上下文对象 BuildContext context

  • lib/common/utils/http.dart
1
2
3
4
5
6
7
8
9
10
11
12
Future post(
  String path, {
  @required BuildContext context,
  dynamic params,
  Options options,
}) async {
  Options requestOptions = options ?? Options();
  requestOptions = requestOptions.merge(extra: {
    "context": context,
  });
  ...
}

错误处理 401 去登录界面

  • lib/common/utils/http.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 添加拦截器
dio.interceptors
    .add(InterceptorsWrapper(onRequest: (RequestOptions options) {
  return options; //continue
}, onResponse: (Response response) {
  return response; // continue
}, onError: (DioError e) {
  ErrorEntity eInfo = createErrorEntity(e);
  // 错误提示
  toastInfo(msg: eInfo.message);
  // 错误交互处理
  var context = e.request.extra["context"];
  if (context != null) {
    switch (eInfo.code) {
      case 401: // 没有权限 重新登录
        goLoginPage(context);
        break;
      default:
    }
  }
  return eInfo;
}));

首页磁盘缓存

  • lib/common/utils/net_cache.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 策略 1 内存缓存优先，2 然后才是磁盘缓存

// 1 内存缓存
var ob = cache[key];
if (ob != null) {
  //若缓存未过期，则返回缓存内容
  if ((DateTime.now().millisecondsSinceEpoch - ob.timeStamp) / 1000 <
      CACHE_MAXAGE) {
    return cache[key].response;
  } else {
    //若已过期则删除缓存，继续向服务器请求
    cache.remove(key);
  }
}

// 2 磁盘缓存
if (cacheDisk) {
  var cacheData = StorageUtil().getJSON(key);
  if (cacheData != null) {
    return Response(
      statusCode: 200,
      data: cacheData,
    );
  }
}

首页缓存策略，延迟 1~3 秒

  • lib/pages/main/channels_widget.dart
1
2
3
4
5
6
7
8
9
10
11
// 如果有磁盘缓存，延迟3秒拉取更新档案
_loadLatestWithDiskCache() {
  if (CACHE_ENABLE == true) {
    var cacheData = StorageUtil().getJSON(STORAGE_INDEX_NEWS_CACHE_KEY);
    if (cacheData != null) {
      Timer(Duration(seconds: 3), () {
        _controller.callRefresh();
      });
    }
  }
}

首页骨架屏

https://pub.flutter-io.cn/packages/pk_skeleton

  • lib/pages/main/main.dart
1
2
3
4
5
6
7
8
@override
Widget build(BuildContext context) {
  return _newsPageList == null
      ? cardListSkeleton()
      : EasyRefresh(
          enableControlFinishRefresh: true,
          controller: _controller,
          ...

© 猫哥

https://ducafecat.tech