Flutter IconButton Remove Padding on Left to Align with Title Texts

Question

So far it just goes in the middle even with a padding Edge Inset set to zero and Box Constraints.

 Row(children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(
                      3, 3, 3, 6),
                  child: Container(
                    width: 150,
                    height: 30,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        "Title Sub-title",
                        textAlign: TextAlign.left,
                        maxLines: 2,
                        style: TextStyle(
                          height: 1.2,
                          fontFamily:
                              'Roboto’,
                          fontSize: 12,
                          letterSpacing: 0.15,
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment:
                  MainAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(
                      0, 10, 0, 3),
                ),
                IconButton(
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () {},
                  icon: Icon(
                    Icons.bookmark_border,
                    size: 20.0,
                    color: Colors.black,
                  ),
                ),
                Text(
                  "Author",
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    height: 1.1,
                    fontFamily: 'Roboto Light',
                    fontSize: 8,
                    color: Colors.black,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  ],
),

Solution

Try with column tree and adjust your padding as you desire

import 'package:flutter/material.dart';
import 'package:so_test/screen/child_page.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool visible = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text("Test obviously"),
          ),
          body: SingleChildScrollView(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 100,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.green,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(10, 10, 3, 0),
                  child: Container(
                    width: 150,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        "Title",
                        textAlign: TextAlign.left,
                        maxLines: 2,
                        style: TextStyle(
                          height: 1.2,
                          fontSize: 12,
                          letterSpacing: 0.15,
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  padding: const EdgeInsets.fromLTRB(10, 10, 3, 0),
                  width: 150,
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "Sub Title",
                      textAlign: TextAlign.left,
                      maxLines: 2,
                      style: TextStyle(
                        height: 1.2,
                        fontSize: 12,
                        letterSpacing: 0.15,
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    SizedBox(
                      width: 5,
                    ),
                    IconButton(
                      padding: EdgeInsets.zero,
                      constraints: BoxConstraints(),
                      onPressed: () {},
                      icon: Icon(
                        Icons.bookmark_border,
                        size: 20.0,
                        color: Colors.black,
                      ),
                    ),
                    Text(
                      "Author",
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        height: 1.1,
                        fontFamily: 'Roboto Light',
                        fontSize: 8,
                        color: Colors.black,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ));
  }
}

Output:

Comments

[Jahidul Islam]

You should try with crossAxisAlignment:CrossAxisAlignment.start under row, by default it's center

[dstacklurker]

hi @Jahidul, I tried that and removed the height setting under Text Style as well. But the padding on the left side of the Icon Button did not get less/removed. The only thing that move was the "Author" text line and it became higher and more misaligned with the bookmark icon.

[Ranvir Mohanlal]

wrap the row in Padding() and remove the child Padding from the Row

[Ranvir Mohanlal]

also, post your code as text - posting as an image makes it hard for us to copy to test and edit

[dstacklurker]

hello @Ranvir, I tried post the code as text but it keeps getting flagged as having too much code text. :( Can you see the edits part of the question? The code is there.

[Jahidul Islam]

do you want to achieve like given image

[dstacklurker]

@Jahidul. Yes that is what I want to achieve. The bookmark Icon Button be left aligned with the Title and subtitle text above it. Right now, the "Author" text became close to the Icon Button, so I think the padding in the ride side of the icon got reduced. I don't know why the left side won't align even if reduced to zero padding.

[Jahidul Islam]

Did my answer working for you?

[dstacklurker]

thanks for the answer, I was able to use it with some modification because of sizing. ^_^