Home > front end >  How to keep column in line in Flutter (Fixing constraints)?
How to keep column in line in Flutter (Fixing constraints)?

Time:09-22

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

CodePudding user response:

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

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

CodePudding user response:

Replace mainAxisAlignment.center with mainAxisAlignment: MainAxisAlignment.start, on Row.

 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.start,
                children: [
                  Image.asset('assets/images/foldertree.png', scale: 3),
                  // Icon(Icons.ac_unit),
                  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.start,
                children: [
                  Image.asset('assets/images/t.png', scale: 3),
                  // Icon(Icons.ac_unit),
                  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.start,
              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.start,
              children: [
                Image.asset('assets/images/prohibited.png', scale: 3),
                // Icon(Icons.ac_unit),
                Text('Reklam YOK',
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 18, color: Colors.white)),
              ],
            ),
          )
        ],
      ),
    );

  • Related