简体   繁体   中英

Flutter container to position bottom right

I have a flutter container (Trending text in violet) which is positioned top left right now. I am wondering what code changes i should do to position the container bottom right ?

                     Container(
                        height: 25.0,
                        width: MediaQuery.of(context).size.width * 0.25,
                        margin: const EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                          color: Theme.of(context).primaryColor,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(12.0),
                            bottomRight: Radius.circular(12.0),
                          ),
                        ),
                        alignment: Alignment.center,
                        child: Shimmer.fromColors(
                          baseColor: Colors.white60,
                          highlightColor: Colors.white,
                          period: Duration(milliseconds: 1000),
                          child: Text(
                            'Trending',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: GoogleFonts.poppins(
                              color: Colors.white.withOpacity(0.9),
                              fontSize: 13.0,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      )

Current view

在此处输入图像描述

The first thing is that you would need to adapt your border radius for the right size (invert them).

The second one is that you should modify the Stack widget above this Container and set its alignment property to Alignment. topRight !

Wrap your image and text in a Stack and set the wanted alignment.

Stack(
alignment: Alignment.topRight,
children: <Widget>[
 ...
 ],
)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM