Выровняйте центр изображения по нижнему краю другого изображения во флаттере

В настоящее время я столкнулся с проблемой создания адаптивного дизайна во флаттере, чтобы он мог нормально работать с тем же внешним видом, что и все размеры экрана

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

Выровняйте центр изображения по нижнему краю другого изображения во флаттере

Это моя попытка:

class ImageAssetUtils 
{
    static Image drawImage(String imagePath, double requiredWidth, double requiredHeight) 
    {
        double screenFactor = 1.0;
        screenFactor = ScreenSize.isSmallScreenSize(myApp.navigatorState.currentContext) ? 0.8 : screenFactor;
        screenFactor = ScreenSize.isLargeScreenSize(myApp.navigatorState.currentContext) ? 1.21 : screenFactor;
        requiredWidth = requiredWidth * screenFactor;
        requiredHeight = requiredHeight * screenFactor;
        return new Image.asset(imagePath, width: requiredWidth, height: requiredHeight);
    }
}

class StyleUtils 
{
    static EdgeInsets givePadding(EdgeInsets absoluteEdges)
    {
        double screenFactor = 1.0;
        screenFactor = ScreenSize.isSmallScreenSize(myApp.navigatorState.currentContext) ? 0.75 : screenFactor;
        screenFactor = ScreenSize.isLargeScreenSize(myApp.navigatorState.currentContext) ? 1.14 : screenFactor;

        double left = absoluteEdges.left * screenFactor;
        double right = absoluteEdges.right * screenFactor;
        double top = absoluteEdges.top * screenFactor;
        double bottom = absoluteEdges.bottom * screenFactor;

        return EdgeInsets.only(left: left, right: right, top: top, bottom: bottom);
    }
}  

class Test extends StatefulWidget 
{
    @override
    _TestState createState() => _TestState();
}

class _TestState extends State<Test> 
{
    @override
    Widget build(BuildContext context)
    {
        return new Scaffold(
            backgroundColor: Color.fromRGBO(235, 235, 235, 1.0),
            body: new Stack(children: <Widget>[
                new Image.asset('some Image.png',
                    fit: BoxFit.fill,
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height * 0.33
                ),
                ListView(children: <Widget>[
                    new Padding(
                        padding: StyleUtils.givePadding(EdgeInsets.only(top: 16.0)),
                        child: new Center(
                            child: new Container(
                                child: ImageAssetUtils.drawImage("my image.png", 100.0, 100.0),
                            ),
                        )
                     )
                ]),
            ])
        );
    }
}

Если какая-либо помощь, она будет очень признательна, заранее спасибо.

Введение в отзывчивый дизайн с использованием CSS
Введение в отзывчивый дизайн с использованием CSS
Поскольку число людей, пользующихся интернетом с помощью мобильных устройств, продолжает расти, важно, чтобы веб-сайты адаптировались к различным...
Ve It
Ve It
Мире, где большая часть интернет-трафика приходится на мобильные устройства, отзывчивый веб-дизайн стал необходимостью. Отзывчивый сайт - это сайт,...
5
0
7 251
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Виджет Дробный перевод используется для управления положением дочернего виджета. Вам также необходимо передать ему Компенсировать, который будет определять манипуляции с положением. Дочерний виджет будет красным прямоугольником, а Offset будет иметь значения x: 0.0 и y: 0.5. Это поместит красный прямоугольник ниже на половину его высоты.

Теперь вы можете положить красный прямоугольник поверх синего. Для этого вы можете использовать виджет Куча. Вам нужно будет установить alignment: Alignment.bottomCenter так, чтобы красный прямоугольник располагался у нижнего края в центре.

Вы можете найти пример кода ниже. Размер синего прямоугольника составляет треть экрана. Красный прямоугольник вдвое меньше синего.

example screen

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(theme: ThemeData(), home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BlueRedRects(
          big: MediaQuery.of(context).size.width / 3.0,
          small: MediaQuery.of(context).size.width / 6.0,
        ),
      ),
    );
  }
}

class BlueRedRects extends StatelessWidget {
  final double big;
  final double small;

  BlueRedRects({this.big, this.small});

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        Container(color: Colors.blue, width: big, height: big),
        FractionalTranslation(
          translation: Offset(0.0, 0.5),
          child: Container(
            color: Colors.red,
            width: small,
            height: small,
          ),
        )
      ],
    );
  }
}

Другие вопросы по теме