Search code examples
flutterflutter-layout

how to make row alignment in flutter


How to make alignment in row if I give space in between spaces occupies between widgets, but I need to get two text at the left and another one in the right. How to do it?

Row(
    // mainAxisAlignment:
    // MainAxisAlignment.spaceBetween,
    children: [
      Container(
        child: Icon(Icons.comment),
        margin: EdgeInsets.only(left: 5.0),
      ),
      Container(
        child: Text(snapshot.data![index].comments.toString(),
            style: TextStyle(
                fontSize: 14.0, fontWeight: FontWeight.bold)),
        margin: EdgeInsets.only(left: 5.0),
      ),
      Align(
        alignment: Alignment.topRight,
        child: Text(snapshot.data![index].date.toString()),
      )
    ]),

check the image in the description

enter image description here


Solution

  • enter image description here

     Row(
              children: [
                Expanded(
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: Row(
                      children: [
                        Container(
                          child: Icon(Icons.comment),
                          margin: EdgeInsets.only(left: 5.0),
                        ),
                        Container(
                          child: Text("6",
                              style: TextStyle(
                                  fontSize: 14.0,
                                  fontWeight: FontWeight.bold)),
                          margin: EdgeInsets.only(left: 5.0),
                        )
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: Align(
                    alignment: Alignment.topRight,
                    child: Text("Aug 4,2021"),
                  ),
                )
              ])
    

    OR

          Row(
              // mainAxisAlignment:
              // MainAxisAlignment.spaceBetween,
              children: [
                Wrap(
                  children: [
                    Container(
                      child: Icon(Icons.comment),
                      margin: EdgeInsets.only(left: 5.0),
                    ),
                    Container(
                      child: Text("6",
                          style: TextStyle(
                              fontSize: 14.0,
                              fontWeight: FontWeight.bold)),
                      margin: EdgeInsets.only(left: 5.0),
                    )
                  ],
                ),
                Expanded(
                  child: Align(
                    alignment: Alignment.topRight,
                    child: Text("Aug 4,2021"),
                  ),
                )
              ])
    

    OR

          Row(
              // mainAxisAlignment:
              // MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: Wrap(
                    children: [
                      Container(
                        child: Icon(Icons.comment),
                        margin: EdgeInsets.only(left: 5.0),
                      ),
                      Container(
                        child: Text("6",
                            style: TextStyle(
                                fontSize: 14.0,
                                fontWeight: FontWeight.bold)),
                        margin: EdgeInsets.only(left: 5.0),
                      )
                    ],
                  ),
                ),
                Text("Aug 4,2021")
              ])
    

    FullCode:

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    void main() {
      WidgetsFlutterBinding.ensureInitialized();
      // testIt();
      runApp(MaterialApp(home: Mainwidget()));
    }
    
    class Mainwidget extends StatefulWidget {
      const Mainwidget({Key? key}) : super(key: key);
    
      @override
      _MainwidgetState createState() => _MainwidgetState();
    }
    
    class _MainwidgetState extends State<Mainwidget> {
      @override
      Widget build(BuildContext context) {
        var richText = RichText(
            text: TextSpan(
                text: '*',
                style: TextStyle(
                    fontSize: 25, color: Colors.red, fontWeight: FontWeight.bold)));
        return Scaffold(
          body: SafeArea(
            child: Container(
              padding: EdgeInsets.all(8.0),
              height: 100,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0,vertical: 8),
                    child: Row(
                      // mainAxisAlignment:
                      // MainAxisAlignment.spaceBetween,
                        children: [
                          Wrap(
                            children: [
                              Container(
                                child: Icon(Icons.comment),
                                margin: EdgeInsets.only(left: 5.0),
                              ),
                              Container(
                                child: Text("6",
                                    style: TextStyle(
                                        fontSize: 14.0,
                                        fontWeight: FontWeight.bold)),
                                margin: EdgeInsets.only(left: 5.0),
                              )
                            ],
                          ),
                          Expanded(
                            child: Align(
                              alignment: Alignment.topRight,
                              child: Text("Aug 4,2021"),
                            ),
                          )
                        ]),
                  )
                ],
              ),
            ),
          ),
        );
      }
    
      Row buildRow2() {
        return Row(
                    // mainAxisAlignment:
                    // MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Wrap(
                          children: [
                            Container(
                              child: Icon(Icons.comment),
                              margin: EdgeInsets.only(left: 5.0),
                            ),
                            Container(
                              child: Text("6",
                                  style: TextStyle(
                                      fontSize: 14.0,
                                      fontWeight: FontWeight.bold)),
                              margin: EdgeInsets.only(left: 5.0),
                            )
                          ],
                        ),
                      ),
                      Text("Aug 4,2021")
                    ]);
      }
    
      Expanded buildExpanded() {
        return Expanded(
                        child: Align(
                          alignment: Alignment.topLeft,
                          child: Row(
                            children: [
                              Container(
                                child: Icon(Icons.comment),
                                margin: EdgeInsets.only(left: 5.0),
                              ),
                              Container(
                                child: Text("6",
                                    style: TextStyle(
                                        fontSize: 14.0,
                                        fontWeight: FontWeight.bold)),
                                margin: EdgeInsets.only(left: 5.0),
                              )
                            ],
                          ),
                        ),
                      );
      }
    }