Создание адаптивного экрана с флаттером - PullRequest
0 голосов
/ 25 сентября 2019

Экран «Моя домашняя страница» не реагирует на экран разных размеров.Он перекрывался с другими виджетами.

Я использовал MediaQuery.

Как решить эту проблему?

Устройство IOS enter image description here

Android-устройство enter image description here

Код:


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

HomePage.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),
                        ], 
                      ),
                    );

_buildSpin

_buildSpin() {


    return Material(
      color: Colors.white,
      shape: CircleBorder(),
      child: InkWell(
        customBorder: CircleBorder(),

        child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.white),
            color: Colors.blue,
            borderRadius: BorderRadius.circular(80)
          ),
          height: 70,
          width: 70,
          child: Text(
            "SPIN",
            style: TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold, color: Colors.white),
          ),
        ),
        onTap: (){},
        ),
    );

  }

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019

вы можете использовать FractionallySizedBox с widthFactor или heightFactor, см .: https://www.youtube.com/watch?v=PEsY654EGZ0

и для ориентации вы можете обернуть ваш виджет с помощью OrientationBuilder: https://flutter.dev/docs/cookbook/design/orientation

0 голосов
/ 25 сентября 2019

Я думаю, вы можете взглянуть на этот пакет .Я использовал его в одном из своих проектов, и это действительно облегчает жизнь при работе с различными экранами, от мобильного до планшета.

...