Provider配合Dio获取网络数据

数据模型类的定义

//使用mixin混入ChangeNotifier类,这个类能够自动管理所有听众.
class GetData with ChangeNotifier {
//存储数据
  String _title;
  String _answerA;

  //提供外部能够访问的数据
  String get title => _title;
  String get answerA => _answerA;

  //提供更改数据的方法
  void getTitleList() async {
    //请求url
    var url =
        'http://api.xxx.com/xxx/xxx/index?key=xxxxx72b89c';
    //调用请求方法传入url
    await request(url).then((value) {
      //Json解码 value为服务端返回的数据
      var data = json.decode(value.toString());
      //打印数据
      print('获取的数据Json格式:::' + data.toString());
      //将Json数据转换成ProductListModel
      ProductListModel productList = ProductListModel.fromJson(data);
      //将返回的数据放入ProductProvider里
      if (productList.newslist == null) {
        // Provider.of<Counter>(context).getProductList([]);
      } else {
        // Provider.of<Counter>(context).getProductList(productList.data);
        _title = productList.newslist[0].title;
        _answerA = productList.newslist[0].answer;
      }
    });
    //通知所有听众进行刷新
    notifyListeners();
  }
}

展示和获取网络数据

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("${Provider.of<GetData>(context).title}"), //展示数据
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _changQuestion,
        tooltip: 'Increment',
        child: Icon(Icons.refresh),
      ),
    );
  }

    void _changQuestion() {
    setState(() {
      Provider.of<GetData>(context).getTitleList(); //获取数据
    });
  }


}

每次初始化时,没有获取到数据,显示null

在build里判断一次,如果是null则调用.

    if(Provider.of<GetData>(context).title != null ) {

    } else {
         Provider.of<GetData>(context).getTitleList();
    }

如果不加判断,则会无限调用.