[Day25] Flutter GetX API AnimatedSwitcher

上一篇介绍了Shimmer这个第三方 并建立了自己想要的Widget
这一篇将实际结合API fetch data, 等待http request的时候
显示Shimmer(之前是用内建的转圈圈), 当资料回来时显示原来的资料.

Widget部分
新增了 AnimatedSwitcher, 使得两个Widget之间的切换更为平顺
controller.isLoading condition判断当前是否有资料,
接着用Key:ValueKey(), 让AnimatedSwitcher知道是哪两个widget转换 (参考)
大家可以随喜好设定自己想要的变化时间 duration,与进出效果 switchInCurve,

class NewsPage extends GetView<NewsPageController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('NewsPage')),
      body: SafeArea(
        child: Obx(
          () => AnimatedSwitcher(
            duration: const Duration(milliseconds: 500),
            switchInCurve: Curves.easeIn,
            child: (controller.isLoading)
                // ? Center(child: CircularProgressIndicator())
                ? ListViewShimmer(key: ValueKey<int>(0))
                : ListView.builder(
                    key: ValueKey<int>(1),
                    itemCount: controller.dataList.length,
                    itemBuilder: (_, index) {
                      final title = controller.dataList[index].title;
                      final content = controller.dataList[index].content;
                      return Card(
                        child: ListTile(
                          title: Text(title),
                          subtitle: Text(content),
                        ),
                      );
                    },
                  ),
          ),
        ),
      ),
    );
  }
}

实际效果如下

下一篇将为大家介绍Flutter的FCM推播