Home > Software engineering >  How to align element inside a nested Row in flutter
How to align element inside a nested Row in flutter

Time:12-25

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...as shown in the image the blue lines are indicating where I want to align the two icons, hope you get a clear image

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

CodePudding user response:

On First Row widget set mainAxisAlignment: MainAxisAlignment.spaceBetween,

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

you can also include Spacer() but It is not necessary to include extra widget

children: [
  //..
  Row(
    children: [
      Text("X"),
      Spacer(),
      Row(

More about Row and layout

CodePudding user response:

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.

P.S :- Please correct missing brackets at code if any !

  • Related