Search code examples
flutterlistdarttextwidget

Alignment of Text widget flutter

I have to display two text, one below the other. But what is happening if upper text is long than below text comes in center but I want that starting point of both the text would remain same (No matter how long the text is).

enter image description here

See this above picture. First text is long so the below text is also not starting from the left. I have tried a lot but no success.

My code is as below:

return ListView.builder(
      itemCount: Model.length,
        itemBuilder: (context, index) {
          return Container(
            margin: const EdgeInsets.all(8.0),
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0)
              ),
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    ClipRRect(
                      borderRadius: BorderRadius.circular(15.0),
                      child: Image.network(
                          "${Model[index].image!}",
                        fit: BoxFit.fill,
                        height: 100,
                        width: 100
                      )
                    ),
                    Align(
                      alignment: Alignment.topLeft,
                      child: Column(
                        children: const [
                          Text("hhhhhhhhhhhhhhhh",
                          textAlign: TextAlign.end,
                          textDirection: TextDirection.ltr,),
                          Align(
                            alignment: Alignment.topLeft,
                            child: Text("ffff",
                              textAlign: TextAlign.start),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        }
    );

How to achieve that both the text will start from the beginning only. If the text is long then the widget will increase the size but only from the end.?

Solution

  • Set the crossAxisAlignment of the Column to CrossAxisAlignment.start

    Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text("hhhhhhhhhhhhhhhh"),
    Text("ffff"),
  ],
),