Как позиционировать элементы независимо, используя Stack, Row и аналогичные элементы в Flutter

Question

Я пытался воспроизвести эти два дизайна во Flutter, используя Stack, Positioned, Row и аналогичные связанные виджеты, однако я снова и снова застреваю на одних и тех же этапах. Я либо не могу отцентрировать текст, либо не могу правильно расположить кнопку возврата. Кроме того, я стараюсь не использовать фиксированные размеры / позиции, поскольку предполагается, что они могут быть адаптированы к разным размерам экрана. Может ли кто-нибудь указать мне правильное направление, как создать этот или подобные макеты, которые будут повторно использоваться на других экранах?

Пример 1:

Пример 2:

Answer 1

Для вашего примера № 1, я пришел с этим решением:

class DetailScreen extends StatefulWidget {
  @override
  _DetailScreenState createState() => _DetailScreenState();
}

class _DetailScreenState extends State<DetailScreen> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: SafeArea(
        child: Stack(
          fit: StackFit.expand,
          children: [
            Container(
              margin: const EdgeInsets.all(5),
              decoration: BoxDecoration(
                color: Color(0xFF0B2746),
                borderRadius: BorderRadius.circular(15),
              ),
              child: Container(
                margin: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 18),
                      child: Text(
                        'Glossary',
                        style: TextStyle(
                          fontWeight: FontWeight.w800,
                          fontSize: 20,
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Card(
                    margin: const EdgeInsets.only(left: 0),
                    child: Padding(
                      padding: const EdgeInsets.all(12),
                      child: Icon(Icons.arrow_back_ios),
                    ),
                    elevation: 6,
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

, и результат следующий:

Для вашего второго примера мне пришлось добавить дополнительные логи c:

class DetailScreen extends StatefulWidget {
  @override
  _DetailScreenState createState() => _DetailScreenState();
}

class _DetailScreenState extends State<DetailScreen> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: SafeArea(
        child: Stack(
          fit: StackFit.expand,
          children: [
            Container(
              margin: const EdgeInsets.all(5),
              decoration: BoxDecoration(
                color: Color(0xFF0B2746),
                borderRadius: BorderRadius.circular(15),
              ),
              child: Column(
                children: [
                  Container(
                    height: 64.0,
                    width: double.infinity,
                    margin: const EdgeInsets.only(left: 54, right: 8, top: 8),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Row(
                      children: <Widget>[
                        SizedBox(width: 20),
                        Icon(Icons.train, size: 35),
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.symmetric(vertical: 18),
                            child: Text(
                              'Metro',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontWeight: FontWeight.w800,
                                fontSize: 20,
                              ),
                            ),
                          ),
                        ),
                        Icon(Icons.arrow_drop_down, size: 35),
                        SizedBox(width: 20),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Container(
                        margin: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10),
                        )),
                  )
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Card(
                    margin: const EdgeInsets.only(left: 0),
                    child: Padding(
                      padding: const EdgeInsets.all(12),
                      child: Icon(Icons.arrow_back_ios),
                    ),
                    elevation: 6,
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

, и результатом этого является следующий: