Как выровнять Column НЕ по центру

Question

import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          //? Background
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage(
                  'images/background.jpg',
                ),
              ),
            ),
          ),
          //? Rectangle and FlipCard
          Container(
            child: Column(
              children: [
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10.0),
                    color: Colors.yellow,
                  ),
                  width: 350.0,
                  height: 100.0,
                ),
                _flipCardWidget,
              ],
            ),
          ),
        ],
      ),
    );
  }

  final _flipCardWidget = FlipCard(
    front: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.0),
        color: Colors.green,
      ),
      width: 350.0,
      height: 300.0,
    ),
    back: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.0),
        color: Colors.red,
      ),
      width: 350.0,
      height: 300.0,
    ),
  );
}

Каким образом выровнять Сolumn, чтобы эти два прямоугольника по горизонтали находились по центру, а по вертикали ниже центра (но не в самом низу)? Без привязки к свойству height.

Answer 1

Как один из вариантов: для контейнера, содержащего столбец с прямоугольниками, задать свойство padding и для столбца mainAxisAlignment, а так же обернуть их виджетом Align.

Что-то типа:

Align(
  alignment: Alignment.bottomCenter, // располагаем контейнер в стэке по центру.
  child: Container(
    padding: EdgeInsets.only(bottom: 48), // устанавливаем отступ относительно нижнего края.
    child: Column(
      mainAxisAlignment: MainAxisAlignment.end // располагаем элементы столбца ближе к низу
      children: [
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.0),
            color: Colors.yellow,
          ),
          width: 350.0,
          height: 100.0,
        ),
        _flipCardWidget,
      ],
    ),
  ),
),

БЛОГ НА HUSL

Как выровнять Column НЕ по центру

Ответы (1 шт):