时间戳

首页 > 解决方案 > Flutter - 如何创建响应式 CircleAvatar 小部件？

flutter - Flutter - 如何创建响应式 CircleAvatar 小部件？

问题描述

我想为CircleAvatar小部件创建一个责任，但我不确定如何。这是我的代码：

body: Container(
                padding: const EdgeInsets.all(10),
                width: MediaQuery.of(context).size.width,
                child: Row(children: [
                  Expanded(
                      child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(...),
                      if (_isAvatar) 
                        Container(
                          padding: const EdgeInsets.all(15),
                          child: CircleAvatar(
                            maxRadius: MediaQuery.of(context).size.width -
                                MediaQuery.of(context).size.width +
                                78, // Here is a problem, how to calc width to fit on any device?
                            backgroundImage: NetworkImage(
                                _pageContent['acf']['doctor']['avatar']),
                          ),
                        ),
                      Container(...),
                    ],
                  )),
                ])));

我想让小部件在任何设备或分辨率上都具有响应性和适用性。我是Flutter的新手，请帮忙！

谢谢！

标签： flutterdart

解决方案

您应该使用半径，而不是 maxRadius。这是代码：

CircleAvatar(
   radius: MediaQuery.of(context).size.width * 0.3, //change 0.3 to any value you want
   backgroundImage: NetworkImage(
      _pageContent['acf']['doctor']['avatar']),
   ),
),

推荐阅读