Bypass the alignment of the parent column in flutter

485 Views Asked by At

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.enter image description here

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;
    });
  }
}
1

There are 1 best solutions below

7
Md. Yeasin Sheikh On

Providing width from LayoutBuilder

  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => ListView(
          children: [
            Row(
              children: [
                Padding(
                  padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                  child: Container(
                    color: Colors.orange,
                    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),
                        SizedBox(
                          width: constraints.maxWidth,
                          child: Container(
                            alignment: Alignment.center,
                            color: Colors.white,
                            child: CustomOutlinedButton(),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

I am using another column widget.

Padding(
  padding: EdgeInsets.fromLTRB(150, 0, 0, 0),
  child: Container(
    color: Colors.orange,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        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(
          alignment: Alignment.center,
          color: Colors.white,
          child: Text("Custom Button"),
        ),
      ],
    ),
  ),
),

enter image description here