我如何使圆形头像图像加载在Flutter?

ax6ht2ek  于 2023-03-24  发布在  Flutter
关注(0)|答案(2)|浏览(120)

这是我的代码,我怎么能显示圆形进度指示器内的圆圈头像,直到从后端在Flutter。

`class _SideBarState extends State<SideBar> {
          bool _isShown = true;
          late SharedPreferences prefs;
          late String name = "";
          late String profile_pic = "";
        
        
          @override
          void initState() {
            _initController();
            super.initState();
        
          }
          void _initController()async {
            prefs = await SharedPreferences.getInstance();
            Map b = json.decode(prefs.getString("token")!);
            name = b['data']['name'];
            profile_pic = b['data']['profile_image_url'];
            setState(() {
        
            });
          }`  Widget build(BuildContext context) {
            return Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: [
                  Container(
                    height: 360.0,
                    child: DrawerHeader(
                      decoration: const BoxDecoration(color: Colors.white),
                      child: Column(
                        children:  [
                          const Image(
                            image: AssetImage("assets/title.png"),
                          ),
                          const SizedBox(
                            height: 25.0,
                          ),
                           CircleAvatar(
                            radius: 80.0,
                            backgroundImage: NetworkImage(
                                profile_pic,
                            ),
                          ),
                          const SizedBox(
                            height: 10.0,
                          ),
                          Center(
                            child: Text(
                              "Hi, $name",
                              style: const TextStyle(color: Colors.grey),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),`

请帮我解决这个问题。
或者给予一些其他的方法来做加载器。
这是我的代码,我怎么能显示圆形进度指示器内的圆圈头像,直到从后端在Flutter。

sdnqo3pr

sdnqo3pr1#

创建一个初始化为false的bool变量,并在获取profile_pic的方法完成后更改其值。检查该变量以及是否显示圆形指示器或带有图像的头像。

q5iwbnjs

q5iwbnjs2#

您可以使用cachedNetworkImage Package,占位符将显示,直到图像被加载。

CachedNetworkImage(
        imageUrl: "",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

https://pub.dev/packages/cached_network_image

相关问题