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

Remove row padding on flutter

Hello im new at mobile mobile developers, and here i got confused by the padding that appears between image and text on my code. mostly i try the code that explained in youtube and the internet and for this problem i still can not find the solution

here are my code

class listBerita extends StatelessWidget {
  const listBerita({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Column(
        children: [
          Container(
              width: 336,
              height: 80,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Image.network(
                      "https://loremflickr.com/320/240",
                      height: 80,
                      width: 80,
                    ),
                    Padding(
                        padding: const EdgeInsets.all(5),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Kategori",
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w700,
                                color: Colors.blue,
                              ),
                            ),
                            SizedBox(height: 10),
                            Text(
                              "Lorem ipsum dolor sit.",
                              style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w700,
                                // color: Colors.blue,
                              ),
                            ),
                            SizedBox(height: 5),
                            Text(
                              "Author • 23 Mei 2023",
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w400,
                                // color: Colors.blue,
                              ),
                            ),
                          ],
                        )),
                  ])),
        ],
      ),
    );
  }
}

my expectation is to move text into left close to the image

Tags:

3

Answers


  1. 0

    Try to padding: const EdgeInsets.only(top: 10,bottom: 10,left: 10,right: 10),
    Also you may wanna learn responsive design so give this measures depended on device width and height .

    Login or Signup to reply.
  2. 0

    Hide or remove mainAxisAlignment: MainAxisAlignment.spaceBetween, under Row.

    enter image description here

    Login or Signup to reply.
  3. 0 
    class listBerita extends StatelessWidget {
  const listBerita({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Column(
        children: [
          Container(
              width: 352,
              height: 96,
            padding: EdgeInsets.all(8.0),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Image.network(
                      "https://loremflickr.com/320/240",
                      height: 80,
                      width: 80,
                    ),
                    Padding(
                        padding: const EdgeInsets.only(top: 5,bottom: 5,left: 5,right: 30), //Convert all to only 
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Kategori",
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w700,
                                color: Colors.blue,
                              ),
                            ),
                            SizedBox(height: 10),
                            Text(
                              "Lorem ipsum dolor sit.",
                              style: TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w700,
                                 color: Colors.black,
                              ),
                            ),
                            SizedBox(height: 5),
                            Text(
                              "Author • 23 Mei 2023",
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w400,
                                 color: Colors.black54,
                              ),
                            ),
                          ],
                        )),
                  ])),
        ],
      ),
    );
  }
}

    Output:

    enter image description here

    I changed the padding in the section with the texts on the right from all to only. If you want your text to approach the picture, you can give a larger number to the right: value.

    I hope I have helped. Enjoy your work.

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

Back To Top
Search