Fox provider插件

特性

提供数据共享的能力

开始

1.安装依赖

flutter pub add fox_provider

2.创建模型

文件 process_model.dart


import 'package:flutter/material.dart';

/// 进度模型
class ProcessModel extends ChangeNotifier {
  int _progress = 0;
  // 获取进度
  int get progress => _progress;
  // 设置进度
  void setProgress(double n) {
    _progress+=n;
    // 通知监听器状态已更新
    notifyListeners(); 
  }
}

在应用顶层提供数据

使用 ChangeNotifierProvider 在应用的顶层提供数据模型。

示例：在 main.dart 中设置

import 'package:flutter/material.dart';
import 'package:fox_provider/fox_provider.dart';
import 'process-model.dart'; // 导入数据模型

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(), // 创建ProcessModel实例
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider例子',
      home: WebviewPage(),
    );
  }
}

在子组件中访问数据

使用 Provider.of

示例：在 WebviewPage 中使用


import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:fox_provider/fox_provider.dart';
import 'process_model.dart';

/// webview
class Webview extends StatefulWidget {
  // url
  final String url;

  /// 构造函数
  const Webview({super.key, required this.url});

  /// 创建state
  @override
  State<Webview> createState() => _WebviewState();
}

// webview state
class _WebviewState extends State<Webview> {

  // webview controller
  late WebViewController _webviewController;

  // 获取状态 model
  ProcessModel? _model;

  @override
  void initState() {
    // 初始化state
    super.initState();

    // 创建webview controller
    _webviewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(onProgress: (int progress) {
         
          // 更新进度
          _model?.setProgress(progress);
          })
      ..loadRequest(Uri.parse(widget.url));

  }

  @override
  Widget build(BuildContext context) {
    // 获取状态 model(不触发监听)
    _model = Provider.of<ProcessModel>(context, listen: false);
    // 返回webview
    return WebViewWidget(controller: _webviewController);
  }
}

Libraries

fox_provider