Flutter : Vertically center column

Flutter : Vertically center column

🚀 Hey there Flutter enthusiasts! Are you trying to vertically center a column in Flutter but facing some issues? Don't worry, I'm here to help! 😊 In this blog post, I will guide you through the process of vertically centering a column in Flutter and provide some easy solutions to common problems faced by developers. So let's dive in and get your column centered in no time!

🎯 The Problem: The code snippet provided includes a new Center widget wrapping a new Column widget. However, for some reason, the column is not being vertically centered as expected. The goal is to have the entire column centered vertically on the screen.

✅ The Solution: To vertically center a column in Flutter, we can make use of additional widgets and properties. Here's how you can achieve the desired result:

1. Replace the new Center widget with a new Align widget. The Align widget provides more control over alignment in Flutter.

2. Set the alignment property of Align widget to Alignment.center. This will ensure that the column is centered vertically.

3. Wrap the Align widget with a Container widget and set its constraints property to BoxConstraints.expand(). This is necessary to allow the column to take up the full height of the screen.

Here's the modified code snippet:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Thank you"),
    ),
    body: Container(
      constraints: BoxConstraints.expand(),
      child: Align(
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(25.0),
              child: AnimatedBuilder(
                animation: animationController,
                child: Container(
                  height: 175.0,
                  width: 175.0,
                  child: Image.asset('assets/angry_face.png'),
                ),
                builder: (BuildContext context, Widget _widget) {
                  return Transform.rotate(
                    angle: animationController.value * 6.3,
                    child: _widget,
                  );
                },
              ),
            ),
            Text(
              'We are glad we could serve you...',
              style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w600,
                color: Colors.black87,
              ),
            ),
            Padding(padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 0.0)),
            Text(
              'We appreciate your feedback!',
              style: TextStyle(
                fontSize: 13.0,
                fontWeight: FontWeight.w200,
                color: Colors.black87,
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

🌟 Now, when you run your updated code, the column should be perfectly centered vertically on the screen. 🎉

📣 Call-to-Action: I hope this blog post has helped you understand how to vertically center a column in Flutter. If you found this information useful, feel free to share it with your fellow Flutter developers! Also, don't forget to let me know your thoughts or share any other Flutter-related questions or topics you'd like me to cover in future blog posts. Leave a comment below and keep the Flutter community buzzing with excitement! 😍