CODEWITHSUNDEEP
flutter
marielle
marielle

Reputation: 438

Align bottom center a text inside a Container of stack

It's the first time I use Flutter and I'm having some problem aligning containers.

Here is my code:

@override
Widget build(BuildContext context) {
  return const MyItem(
      imgSrc: 'https://images.unsplash.com/photo-1610655012457-9cbd66fe510b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80',
      text: 'Lorem ipsum');
}

class MyItem extends StatelessWidget {
  const MyItem(
      {Key? key,
      required this.imgSrc,
      required this.text})
      : super(key: key);

  final String imgSrc;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration:
            BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
        margin: const EdgeInsets.symmetric(horizontal: 3),
        child: Stack(children: [
          Container(
            decoration: BoxDecoration(
                border: Border.all(color: Colors.blueAccent, width: 3)),
            child: Image.network(imgSrc, fit: BoxFit.cover),
          ),
          Container(
            alignment: Alignment.bottomCenter,
            decoration: BoxDecoration(
                border: Border.all(color: Colors.orange, width: 3)),
            child: Text(
              text.toUpperCase(),
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 14.0,
                  fontWeight: FontWeight.bold),
            ),
          ),
        ]));
  }
}

The result is:

enter image description here

But I want the text lorem ipsum at the bottom side, not near the top side. Seems like alignment: Alignment.bottomCenter doesn't work.

What am I missing?

Upvotes: 0

Views: 3361

Answers (4)

Mahmoud
Mahmoud

Reputation: 510

You should use the Align widget. with assign value to the alignment attribute the container will expand to fill its parent and position its child within itself according to the given value.

here is the sample :

class MyItem extends StatelessWidget {
  const MyItem(
      {Key? key,
      required this.imgSrc,
      required this.text})
      : super(key: key);

  final String imgSrc;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration:
            BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
        margin: const EdgeInsets.symmetric(horizontal: 3),
        child: Stack(children: [
          Container(
            decoration: BoxDecoration(
                border: Border.all(color: Colors.blueAccent, width: 3)),
            child: Image.network(imgSrc, fit: BoxFit.cover),
          ),
       Align(
          alignment: Alignment.bottomCenter,
        child:Container(
            alignment: Alignment.bottomCenter,
            decoration: BoxDecoration(
                border: Border.all(color: Colors.orange, width: 3)),
            child: Text(
              text.toUpperCase(),
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 14.0,
                  fontWeight: FontWeight.bold),
            ),
          ),),
        ]));
  }
}

Upvotes: 0

ViKi Vyas
ViKi Vyas

Reputation: 741

You must fix the height and width of Stack as it is like a graph, where the centre is (0,0). There x & y has a value from -1 to 1 in the container. You go up from the centre value goes nearer to -1 and down +1 same as If you go left -1 right +1.

After that, you can use AlignmentDirectional to tell where exactly you want to put chid of the stack. in your case as below.

Align( alignment: const AlignmentDirectional(0, 1), child: SizedBox()....

==Now coming to your code must be like this... review comments in the same too.

@override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width * 1,
      //Master container size of mobile screen and limits of stack.
      height: MediaQuery.of(context).size.height * 1,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.purple, width: 3),
      ),
      margin: const EdgeInsets.symmetric(horizontal: 3),
      child: Stack(
        children: [
          Align(
            alignment: const AlignmentDirectional(0, 0),
            child: Container(
              width:
                  MediaQuery.of(context).size.width * 1, //You can fix your own
              height: MediaQuery.of(context).size.height * 1,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.blueAccent, width: 3),
              ),
              child: Image.network(imgSrc, fit: BoxFit.cover),
            ),
          ),
          Align(
            alignment: const AlignmentDirectional(0, 1),
            child: Container(
              width: MediaQuery.of(context).size.width * 1,
              //You can fix your own
              height: MediaQuery.of(context).size.height * 0.1,
              /*alignment: Alignment.bottomCenter,*/
              //This will only work inside of container.
              decoration: BoxDecoration(
                border: Border.all(color: Colors.orange, width: 3),
              ),
              child: Text(
                text.toUpperCase(),
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 14.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

Upvotes: 0

Md Nezam Uddin
Md Nezam Uddin

Reputation: 277

You just have to wrap the container widget with the Positioned widget, just tell the bottom: 0,

import 'package:flutter/material.dart';
    
    class MyItem extends StatelessWidget {
      const MyItem ({Key? key}) : super(key: key);
    
      final imgSrc =
          'https://images.unsplash.com/photo-1610655012457-9cbd66fe510b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80';
      final String text = 'Lorem ipsum';
    
      @override
      Widget build(BuildContext context) {
        return Container(
          decoration:
              BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
          margin: const EdgeInsets.symmetric(horizontal: 3),
          child: Stack(
            children: [
              Container(
                height: MediaQuery.of(context).size.height,
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.blueAccent, width: 3)),
                child: Image.network(imgSrc, fit: BoxFit.cover),
              ),
              Positioned(
                bottom: 0,
                width: MediaQuery.of(context).size.width,
                child: Container(
                  height: 50,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(color: Colors.orange, width: 3),
                  ),
                  child: Text(
                    '$text'.toUpperCase(),
                    //text.toUpperCase(),
                    style: const TextStyle(
                        color: Colors.white,
                        fontSize: 14.0,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }

Upvotes: 3

Zekai Demir
Zekai Demir

Reputation: 172

You also can use below codes

class MyItem extends StatelessWidget {
  const MyItem({Key? key, required this.imgSrc, required this.text})
      : super(key: key);

  final String imgSrc;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration:
            BoxDecoration(border: Border.all(color: Colors.purple, width: 3)),
        margin: const EdgeInsets.symmetric(horizontal: 3),
        child: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(
                    imgSrc,
                  ),
                  fit: BoxFit.cover),
              border: Border.all(color: Colors.blueAccent, width: 3)),
          child: Container(
             decoration: BoxDecoration(
                border: Border.all(color: Colors.orange, width: 3)),
            child: Text(
              text.toUpperCase(),
              textAlign: TextAlign.center,
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 14.0,
                  fontWeight: FontWeight.bold),
            ),
          ),
        ));
  }
}

Upvotes: 0

Related Questions