How to keep column in line in Flutter (Fixing constraints)?

Issue

I have a column in and in column i have rows. I want to make rows start in same line.The problem is i cannot put in line the rows.Normally without rows column’s texts were in line but i needed to put icons in front of the text so make them as row.I need help with this problem.

This is my code:

Container(
              margin: const EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    height: 58,
                  ),
                  Container(
                      margin: const EdgeInsets.only(bottom: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset('assets/images/foldertree.png', scale: 3),
                          Text('Sınırsız belge',
                              textAlign: TextAlign.center,
                              style:
                                  TextStyle(fontSize: 18, color: Colors.white)),
                        ],
                      )),
                  Container(
                      margin: const EdgeInsets.only(bottom: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset('assets/images/t.png', scale: 3),
                          Text('Metin Algılama (OCR)',
                              textAlign: TextAlign.center,
                              style:
                                  TextStyle(fontSize: 18, color: Colors.white)),
                        ],
                      )),
                  Container(
                      margin: const EdgeInsets.only(bottom: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(
                            Icons.ac_unit,
                            color: Colors.blue,
                            size: 10.0,
                          ),
                          Text('Word\'e Dönüştür',
                              textAlign: TextAlign.center,
                              style:
                                  TextStyle(fontSize: 18, color: Colors.white)),
                        ],
                      )),
                  Container(
                      margin: const EdgeInsets.only(bottom: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset('assets/images/prohibited.png', scale: 3),
                          Text('Reklam YOK',
                              textAlign: TextAlign.center,
                              style:
                                  TextStyle(fontSize: 18, color: Colors.white)),
                        ],
                      ))
                ],
              )),

This how it looks:

enter image description here

This is how i want it to look like:

enter image description here

Solution

Just replace mainAxisAlignment.center to mainAxisAlignment.start for the rows.

...
child: Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [...

Answered By – Shaan Faydh

Leave a Comment