Flutter IconButton Remove Padding on Left to Align with Title Texts - flutter

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,
),
),
],
),
],
),
),
),
],
),

Answer 1

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:

Answer 2

You can keep the first Container in different column and create the separate column for below three children's.