简体   繁体   中英

How to align element inside a nested Row in flutter

Here is my code, now I wanted to align the two icons(copy and favorite) in the right bottom in the same row of that the author name. I don't want to use padding here because that will create a problem as the author's name is of different lengths. Thanks in advance... 如图所示,蓝线表示我要对齐两个图标的位置,希望你能得到清晰的图像

SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(8, 2, 8, 1),
                child: Container(
                  width: MediaQuery.of(context).size.width*0.90,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      gradient: LinearGradient(
                          colors: <Color>[
                            Colors.blue,
                            Colors.yellow,
                          ]
                      )
                  ),
                  child: Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          Show_It[index].quote.toString(),
                          style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.w500,
                            color: Colors.white,
                          ),
                        ),
                      ),
                      Row(
                        children: [
                          Text(
                            Show_It[index].author.toString(),
                          ),
                          Row(
                            children: [
                              IconButton(
                                onPressed: () async{
                                  FlutterClipboard.copy(Show_It[index].quote.toString()).then((value) => {
                                    Fluttertoast.showToast(msg: "Copied to clipboard")
                                  });
                                },
                                icon: Icon(
                                  Icons.copy,
                                ),
                              ),
                              Material(
                                color: Colors.transparent,
                                child: IconButton(
                                  onPressed: () async{
                                    CollectionReference ref= FirebaseFirestore.instance
                                        .collection("users")
                                        .doc(FirebaseAuth.instance.currentUser!.uid)
                                        .collection('Favourites');
                                    var data={
                                      'Quote': Show_It[index].quote,
                                      'author': Show_It[index].author,
                                    };
                                    ref.add(data).then((value) => {
                                      Fluttertoast.showToast(msg: "Added to Favourites")
                                    });
                                  },
                                  splashRadius: 20,
                                  splashColor: Colors.redAccent,
                                  icon: Icon(
                                    Icons.favorite,
                                    color: Colors.red,
                                  ),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),

                    ],
                  ),
                ),
              ),
            );

I hope I mentioned all the necessary details, ignore the extra code if it's there, that is already in use

On First Row widget set mainAxisAlignment: MainAxisAlignment.spaceBetween,

      child: Column(
                children: [
                  //..
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        Show_It[index].author.toString(),
                      ),
                      Row(

More about layout

You should take two Row for achieving what you want.

  1. In first Row you should call your Text(Show_It[index].auther.toString(),)
  2. Then In second Row you should put both of your icons with mainAxisAlignment:MainAxisAlignment.end .

And for spacing between first and second Row you should put mainAxisAlignment:MainAxisAlignment.spaceBetween

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:[
 Text(Show_It[index].auther.toString(),),
 ],),

Row(
mainAxisAlignment:MainAxisAlignment.end,
children:[
 IconButton(
icon:Icon(Icons.copy,),),
 IconButton(
icon:Icon(Icons.favorite,color:Colors.red,),),]

And for better understanding Row Column CheatSheet go with this.

PS:- Please correct missing brackets at code if any !

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