So I have a column and I want all but one of the children to align to the Left part of it (CrossAxisAlignment.start) ,however I want the last widget to be aligned to the Center. I tried using a stack with an alignment widget, Center widget, Wrapping the last widget in a row and using main axis alignment, but to no avail. I couldn't use a flexible as this column is wrapped in a ListView for scrolling purposes.
Here is a screen shot of the UI itself , and the widget in question is the Bottom widget (Let's work together button). I colored the entire column in black and the button in white.
And Here is the Code :
ListView(
children: [
CustomAppBar(),
scrollable ? SizedBox(height: 60) : SizedBox(height: 200),
Row(
children: [
Padding(
padding: EdgeInsets.fromLTRB(150, 0, 0, 0),
child: Container(
color: Colors.black,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Hi, my name is',
),
SizedBox(height: 40),
Text(
'Aly ElAshram',
),
SizedBox(height: 40),
Text(
'I am a passionate Flutter dev',
),
SizedBox(height: 100),
Container(
color: Colors.white, child: CustomOutlinedButton()),
]),
),
),
Here is the Code for the CustomOutlined Button.
class _CustomOutlinedButtonState extends State<CustomOutlinedButton> {
bool _isHovered = false;
var hover = Matrix4.identity()..translate(2, -2, 0);
@override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (event) => onHover(true),
onExit: (event) => onHover(false),
child: AnimatedContainer(
duration: Duration(milliseconds: 200),
transform: _isHovered ? hover : Matrix4.identity(),
child: OutlinedButton(
style: OutlinedButton.styleFrom(
foregroundColor: Colors.transparent,
backgroundColor: Colors.transparent,
padding: EdgeInsets.all(20),
side: BorderSide(
color: _isHovered ? green : greenHighlight,
)),
onPressed: () {
print('Hired');
},
child: Text(
"Let's work together!",
style: GoogleFonts.montserrat(
color: Color(0xFF64ffda),
fontSize: 22,
fontWeight: FontWeight.w500,
),
),
),
),
);
}
onHover(bool isHovered) {
setState(() {
this._isHovered = isHovered;
});
}
}
Providing width from
LayoutBuilderI am using another column widget.