Выровнять Alignment.bottomCenter не поможет в строке

Question

Android Плагин Studio 2.6 Flutter.

Мне нужно 4 точки, чтобы поместить низ и центр над изображением.

Я пытаюсь использовать виджет Align так:

Align(alignment: Alignment.bottomCenter,

но это не поможет. Магазин точек на вершине.

Здесь код:

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:intl/intl.dart';
import 'package:logger/logger.dart';
import '../constants.dart' as Constants;

  Widget _createCarouselContainer() {
    final List<String> imagesFullPathList = [
      'assets/images/campaign1.png'
    ];
    int _current = 0;
    return Container(
        decoration: new BoxDecoration(boxShadow: [_createBoxShadow()]),
        child: new ClipRRect(
            borderRadius: BorderRadius.all(
                Radius.circular(Constants.ROUNDED_CORNER_RADIUS)),
            child: new Stack(children: [
              CarouselSlider(
                  options: CarouselOptions(
                      onPageChanged: (index, reason) {
                        _current = index;
                        _logger.d(
                            "_createCarouselContainer: _current = $_current");
                      },
                      autoPlay: true,
                      viewportFraction: 1.0, // page fills 100% of the carousel
                      height: Constants.CARD_VIEW_HEIGHT),
                  items: imagesFullPathList
                      .map((imageName) => Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: AssetImage(imageName),
                              ),
                            ),
                          ))
                      .toList()),
              Align(
                  alignment: Alignment.bottomCenter,
                  child: Row(
                    children: imagesFullPathList.map((url) {
                      int index = imagesFullPathList.indexOf(url);
                      _logger.d("_createCarouselContainer: index =  $index");
                      return Container(
                        width: 10.0,
                        height: 10.0,
                        margin: EdgeInsets.symmetric(
                            vertical: 10.0, horizontal: 2.0),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: _current == index
                              ? Color.fromRGBO(255, 255, 255, 1)
                              : Color.fromRGBO(0, 0, 0, 1),
                        ),
                      );
                    }).toList(),
                  ))
            ])));
  }

и вот результат:

Почему Align не помогает?

Answer 1

Вы должны использовать Positioned Widget внутри Stack Widget вместо Align

для выравнивания Widget по центру снизу, используя Positioned, используйте

bottom: 0,
left: 0,
right: 0,

ОБРАЗЕЦ КОДА

Widget _createCarouselContainer() {
    final List<String> imagesFullPathList = [
      'assets/images/campaign1.png'
    ];
    int _current = 0;
    return Container(
        decoration: new BoxDecoration(boxShadow: [_createBoxShadow()]),
        child: new ClipRRect(
            borderRadius: BorderRadius.all(
                Radius.circular(Constants.ROUNDED_CORNER_RADIUS)),
            child: new Stack(children: [
              CarouselSlider(
                  options: CarouselOptions(
                      onPageChanged: (index, reason) {
                        _current = index;
                        _logger.d(
                            "_createCarouselContainer: _current = $_current");
                      },
                      autoPlay: true,
                      viewportFraction: 1.0, // page fills 100% of the carousel
                      height: Constants.CARD_VIEW_HEIGHT),
                  items: imagesFullPathList
                      .map((imageName) => Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: AssetImage(imageName),
                              ),
                            ),
                          ))
                      .toList()),
              Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Row(
                    children: imagesFullPathList.map((url) {
                      int index = imagesFullPathList.indexOf(url);
                      _logger.d("_createCarouselContainer: index =  $index");
                      return Container(
                        width: 10.0,
                        height: 10.0,
                        margin: EdgeInsets.symmetric(
                            vertical: 10.0, horizontal: 2.0),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: _current == index
                              ? Color.fromRGBO(255, 255, 255, 1)
                              : Color.fromRGBO(0, 0, 0, 1),
                        ),
                      );
                    }).toList(),
                  ))
            ])));
  }

Answer 2

Здесь мое решение (по MediaQuery и Positioned).

Widget _createCarouselContainer(BuildContext context) {
    final List<String> imagesFullPathList = [
      'assets/images/campaign1.png',
    ];
    double dotContainerWidth = 12.0;
    double dotContainerHeight = 12.0;
    double dotHorizontalInsets = 2.0;
    int _current = 0;
    double allDotsContainerWidth =
        dotContainerWidth * imagesFullPathList.length +
            ((imagesFullPathList.length - 1) * dotHorizontalInsets);
    final double screenWidth = MediaQuery.of(context).size.width;
    return Container(
        decoration: new BoxDecoration(boxShadow: [_createBoxShadow()]),
        child: new ClipRRect(
            borderRadius: BorderRadius.all(
                Radius.circular(Constants.ROUNDED_CORNER_RADIUS)),
            child: new Stack(children: [
              CarouselSlider(
                  options: CarouselOptions(
                      onPageChanged: (index, reason) {
                        _current = index;
                        _logger.d(
                            "_createCarouselContainer: _current = $_current");
                      },
                      autoPlay: true,
                      viewportFraction: 1.0, // page fills 100% of the carousel
                      height: Constants.CARD_VIEW_HEIGHT),
                  items: imagesFullPathList
                      .map((imageName) => Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: AssetImage(imageName),
                              ),
                            ),
                          ))
                      .toList()),
              Positioned(
                  // in Stack to align widget must use "Positioned"
                  bottom: Constants.DEFAULT_MARGIN,
                  left: screenWidth / 2 - allDotsContainerWidth / 2,
                  child: Row(
                    children: imagesFullPathList.map((url) {
                      int index = imagesFullPathList.indexOf(url);
                      return Container(
                        width: dotContainerWidth,
                        height: dotContainerHeight,
                        margin: EdgeInsets.symmetric(
                            vertical: 10.0, horizontal: dotHorizontalInsets),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: _current == index
                              ? Color.fromRGBO(255, 255, 255, 1)
                              : Color.fromRGBO(0, 0, 0, 1),
                        ),
                      );
                    }).toList(),
                  ))
            ])));
  }

и теперь точки находятся в ДНЕ И ЦЕНТРЕ. Вот результат: