Flutter 颤振响应屏的制作

我的主页屏幕在不同大小的屏幕上并没有响应。 它与其他小部件重叠

我使用了

MediaQuery

如何解决这个问题

IOS设备

安卓设备

代码：

Size get size => Size(MediaQuery.of(context).size.width * 0.8,
      MediaQuery.of(context).size.width * 0.8);

  double _rotote(int index) => (index / widget.items.length) * 2 * pi;

Center(
      child: Container(
            // alignment: Alignment.center,
              height:  size.height/1.1,
              width:  size.width/1.1,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  boxShadow: [BoxShadow(blurRadius: 20, color: Colors.black38)],
                  //border: Border.all(color: Colors.black)
                  ),
                  child:  Transform.rotate(
            angle: -(widget.current + widget.angle) * 2 * pi,
            child: Stack(
              alignment: Alignment.center,
              children: <Widget>[
                for (var luck in widget.items) ...[_buildCard(luck)],
                for (var luck in widget.items) ...[_buildImage(luck)],
              ],
            ),
          ),
            ),
    );

_buildCard(Luck luck) {
    var _rotate = _rotote(widget.items.indexOf(luck));
    var _angle = 2 * pi / widget.items.length;
    return Transform.rotate(
      angle: _rotate,
      child: ClipPath(
        clipper: _LuckPath(_angle),
        child: Container(
          height:size.height/1.1,
          width: size.width/1.1,
          decoration: BoxDecoration(
           // border: Border.all(color: Colors.black),
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [luck.color, luck.color])),
        ),
      ),
    );
  }

构建方法：

Size get size => Size(MediaQuery.of(context).size.width * 0.8,
      MediaQuery.of(context).size.width * 0.8);

  double _rotote(int index) => (index / widget.items.length) * 2 * pi;

Center(
      child: Container(
            // alignment: Alignment.center,
              height:  size.height/1.1,
              width:  size.width/1.1,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  boxShadow: [BoxShadow(blurRadius: 20, color: Colors.black38)],
                  //border: Border.all(color: Colors.black)
                  ),
                  child:  Transform.rotate(
            angle: -(widget.current + widget.angle) * 2 * pi,
            child: Stack(
              alignment: Alignment.center,
              children: <Widget>[
                for (var luck in widget.items) ...[_buildCard(luck)],
                for (var luck in widget.items) ...[_buildImage(luck)],
              ],
            ),
          ),
            ),
    );

_buildCard(Luck luck) {
    var _rotate = _rotote(widget.items.indexOf(luck));
    var _angle = 2 * pi / widget.items.length;
    return Transform.rotate(
      angle: _rotate,
      child: ClipPath(
        clipper: _LuckPath(_angle),
        child: Container(
          height:size.height/1.1,
          width: size.width/1.1,
          decoration: BoxDecoration(
           // border: Border.all(color: Colors.black),
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [luck.color, luck.color])),
        ),
      ),
    );
  }

车轮上的图像

_buildImage(Luck luck) {
    var _rotate = _rotote(widget.items.indexOf(luck));
    return Transform.rotate(
      angle: _rotate,
      child: Container(
        height: size.height,
        width: size.width,
        alignment: Alignment.topCenter,
        child: ConstrainedBox(
          constraints:
              BoxConstraints.expand(height: size.height / 3, width: 44),
          child: Image.asset(luck.asset),//Image.asset("asset/image/wheel.png")
        ),
      ),
    );
  }
}

上述方法在StatefulWidget类中定义

BoardView.dart

主页。dart

 Center(
                child: Column(
                      children: <Widget>[
                        ArrowView(),// for upper arrow
                        Stack(
                          alignment: Alignment.center,
                            children: <Widget>[

                              BoardView(items: _items, current: _current, angle: _angle),
                              _buildSpin(),


                            ],
                          ),
                          _buildResult(_value),
                        ], 
                      ),
                    );

---

我想你可以看看这个。我曾在我的一个项目中使用过它，在处理从手机到平板电脑的不同屏幕时，它确实让生活变得轻松。

您可以将

部分物理化dbox

与

宽度因子

或

高度因子

一起使用，请参见：

对于方向，您可以使用

OrientationBuilder

包装小部件：