Question 75710 in Flutter Question posted in
The official Flutter documentation can be found here.

How to move folder icon left side – Flutter

enter image description here

I’m new to Flutter and trying to build a simple UI but running into problems. I built an ink space with icons. My problem is that I can’t get the folder icon to the left.

My code:

Container(
  width: MediaQuery.of(context).size.width - 20,
  padding: EdgeInsets.all(20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Expanded(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.all(30),
            color: Colors.blue,
            child: Container(
              padding: EdgeInsets.all(20),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          InkWell(
                            onTap: () {
                              var personUnderCareIdentifier = "";
                              if (_personUnderCare.isNotEmpty) {
                                personUnderCareIdentifier =
                                    _selectedPersonUnderCare
                                        .documentID;
                              }
                            },
                            child: const Text(
                              "View all",
                              style: TextStyle(
                                  fontSize: 15,
                                  height: 1.4,
                                  fontWeight: FontWeight.w600,
                                  color: Color.fromRGBO(
                                      14, 113, 176, 1)),
                            ),
                          ),
                          Column(
                            children: [
                              Container(
                                color: Colors.red,
                                padding: EdgeInsets.all(20),
                                child: Column(
                                  mainAxisAlignment:
                                      MainAxisAlignment.start,
                                  crossAxisAlignment:
                                      CrossAxisAlignment.start,
                                  children: [
                                    InkWell(
                                      onTap: () {},
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        children: [
                                          Image(
                                            height: 70,
                                            image: AssetImage(
                                                "assets/images/folder.png"),
                                          )
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      )),
    ],
  ),
),

This is the code I made. I hope someone can help me in solving my problem and at the same time can teach me in using flutter. Thank you.

Tags:

4

Answers


  1. 0

    You need to make changes in mainAxisAlignment.

    Container(
                width: MediaQuery.of(context).size.width - 20,
                padding: EdgeInsets.all(20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [

                    Expanded(
                        child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          margin: EdgeInsets.all(30),
                          color: Colors.blue,
                          child: Container(
                            padding: EdgeInsets.all(20),
                            child: Column(
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.start, <---- make here change
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        InkWell(
                                          onTap: () {
                                            var personUnderCareIdentifier = "";
                                            if (_personUnderCare.isNotEmpty) {
                                              personUnderCareIdentifier =
                                                  _selectedPersonUnderCare
                                                      .documentID;
                                            }
                                          },
                                          child: const Text(
                                            "View all",
                                            style: TextStyle(
                                                fontSize: 15,
                                                height: 1.4,
                                                fontWeight: FontWeight.w600,
                                                color: Color.fromRGBO(
                                                    14, 113, 176, 1)),
                                          ),
                                        ),
                                        Column(
                                          children: [
                                            Container(
                                              color: Colors.red,
                                              padding: EdgeInsets.all(20),
                                              child: Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.start,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  InkWell(
                                                    onTap: () {},
                                                    child: Row(
                                                      mainAxisAlignment:
                                                          MainAxisAlignment
                                                              .start,
                                                      children: [
                                                        Image(
                                                          height: 70,
                                                          image: AssetImage(
                                                              "assets/images/folder.png"),
                                                        )
                                                      ],
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    )),
                    
                  ],
                ),
              ),
    Login or Signup to reply.
  2. 0

    wrap your container in Align widget and then apply the
    Alignment property may it will work because its also work on my side especially in flutter web thank you

    Login or Signup to reply.
  3. 0

    If you to do that with Rows, you just need to divide your Row into two: one for "View all" and one for folder, with different alignment. Here’s your refactored code with this solution:

    Padding(
    padding: const EdgeInsets.all(50),
    child: ColoredBox(
      color: Colors.blue,
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            Row( /// <------ HERE
              mainAxisAlignment: MainAxisAlignment.end, /// <------ HERE
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                InkWell(
                  onTap: () {
                    var personUnderCareIdentifier = "";
                    if (_personUnderCare.isNotEmpty) {
                      personUnderCareIdentifier =
                          _selectedPersonUnderCare
                              .documentID;
                    }
                  },
                  child: const Text(
                    "View all",
                    style: TextStyle(
                        fontSize: 15,
                        height: 1.4,
                        fontWeight: FontWeight.w600,
                        color: Color.fromRGBO(
                            14, 113, 176, 1)),
                  ),
                ),
              ],
            ),
            Row( /// <------ HERE
              mainAxisAlignment: MainAxisAlignment.start, /// <------ HERE
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  color: Colors.red,
                  padding: const EdgeInsets.all(20),
                  child: InkWell(
                    onTap: () {},
                    child: Image(
                      height: 70,
                      image: AssetImage(
                          "assets/images/folder.png"),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  ),

    You can also use Align widgets instead of Rows, but that demands some more code refactoring.

    Login or Signup to reply.
  4. 0

    I was able to modify your code a little in order to achieve your desired aim.

    • You basically have to work on your Column and Row
      arrangement/nesting.
    • The first Column contains 2 Columns (children) which each contain the Text() and Image() widgets (but both are now wrapped in a Row() widget to easily control their alignments).

    And that works perfectly!

    Container(
          width: MediaQuery.of(context).size.width - 20,
          padding: const EdgeInsets.all(20),
          child: Row(
            children: [
              Expanded(
                child: Column(
                  children: [
                    Container(
                      margin: const EdgeInsets.all(30),
                      color: Colors.blue,
                      child: Container(
                        padding: const EdgeInsets.all(20),
                        child: Column(
                          children: [
                            Column(
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    InkWell(
                                      onTap: () {
                                        var personUnderCareIdentifier = "";
                                    if (_personUnderCare.isNotEmpty) {
                                      personUnderCareIdentifier = _selectedPersonUnderCare.documentID;
                                    }
                                      },
                                      child: const Text(
                                        "View all",
                                        style: TextStyle(fontSize: 15, height: 1.4, fontWeight: FontWeight.w600, color: Color.fromRGBO(14, 113, 176, 1)),
                                      ),
                                    ),
                                  ],
                                ),
                                Column(
                                  children: [
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.start,
                                      children: [
                                        Container(
                                          color: Colors.red,
                                          padding: const EdgeInsets.all(20),
                                          child: InkWell(
                                            onTap: () {},
                                            child: const Image(height: 40, image: AssetImage(Images.appIcon)),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),

    You can view the screenshot on mobile Here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search