Text Alignment Bottom сохраняет текст вверху экрана - PullRequest
0 голосов
/ 09 мая 2020

У меня есть текст, наложенный на изображение, и я пытаюсь сделать так, чтобы текст находился внизу изображения. Я пробовал использовать различные варианты alignment: Alignment.bottom, но если я добавлю end, он просто поместит текст в крайний правый угол вверху изображения, а не внизу:

               return new Column(
                  children: <Widget>[
                    Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Stack(
                          children: <Widget>[
                              new Container(
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.pink[250],
                                    width: 7,
                                  ),
                                  borderRadius: BorderRadius.circular(9),
                                ),
                                  child: new Container(
                                    child: new Image.asset(dateIdeas[index]['Image']),
                                  ),
                              ),
                              Container(
                                alignment: Alignment.bottomCenter,
                                child: Text(dateIdeas[index]['Description'],
                                    style: TextStyle(
                                      fontSize: 30,
                                      color: Colors.white,
                                      fontFamily: 'IndieFlower',
                                    )),
                              ),
                          ],
                        ),
                      ],
                    )
                  ],
                );

Я не конечно, если мне что-то здесь не хватает.

Ответы [ 2 ]

1 голос
/ 09 мая 2020

Проблема в том, что ширина и высота Контейнера вашего текста не такие, как у вашего изображения. Поскольку вы используете Stack, используйте виджет Positioned.fill для создания контейнера над изображением того же размера, что и он.

Что-то вроде:

Stack(
  children: <Widget>[
    Container(), // Your image here
    Positioned.fill(
      child: Container(), // Your text with alignment here
    ),
  ]
),

0 голосов
/ 09 мая 2020

вот пример приложения для написания "Hello" внизу изображения:

enter image description here

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Container(
          width: 200,
          height: 200,
          child: Stack(
          children: <Widget>[
          Positioned.fill(
            child: Image.network("https://images.unsplash.com/photo-1586924234039-d0f3b6dcab92?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80")
          ),
          Positioned.fill(
            child: Container(
            alignment: Alignment.bottomCenter,
            child: Text("Hello", style: TextStyle(color: Colors.white))
          ),),
        ]),),),
      ),
    );
  }
}
...