Center Text and BottomRight Text in Card

0
votes

How can I get the following effect on the Card widget?

enter image description here

This is my code:

Card(
        elevation: 4,
        color: const Color(AppColors.brighterBackground),
        child: Padding(
            padding: EdgeInsets.only(
                left: horizontalPadding,
                top: verticalPadding,
                right: horizontalPadding,
                bottom: verticalPadding),
            child: Column(children: [
              Text('CENTER HORIZONTALLY AND VERTICALLY',
                  style: TextStyle(color: Colors.white, fontSize: contentSize)),
              Text('BOTTOM-RIGHT',
                  style: TextStyle(color: Colors.white, fontSize: contentSize))
            ])))
2
flutterdartwidgetflutter-layout

2 Answers

0
votes

Try below code hope its helpful to you.

You can used Stack Widget here and Positioned Widget here . you used your padding on your need.

Card(
    elevation: 4,
    color: Colors.red,
    child: Padding(
      padding: EdgeInsets.only(
        left: 10,
        top: 10,
        right: 10,
        bottom: 10,
      ),
      child: Stack(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'CENTER HORIZONTALLY AND VERTICALLY',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ],
          ),
          Positioned(
            bottom: 0,
            right: 1,
            child: Text(
              'BOTTOM-RIGHT',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
          ),
        ],
      ),
    ),
  ),

Your result screen-> Image

0
votes
Card(
    elevation: 4,
    color: Colors.red,
    child: Padding(
      padding: EdgeInsets.only(
        left: 10,
        top: 10,
        right: 10,
        bottom: 10,
      ),
      child: Stack(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'CENTER HORIZONTALLY AND VERTICALLY',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ],
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Flexible(
                child: SizedBox(height: MediaQuery.of(conetxt).size.height)
              ),
              Text(
              'BOTTOM-RIGHT',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),