{"id":12288,"date":"2025-05-09T06:23:07","date_gmt":"2025-05-09T06:23:07","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12288"},"modified":"2025-05-19T12:21:36","modified_gmt":"2025-05-19T12:21:36","slug":"vertically-center-column-in-flutter","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/flutter\/vertically-center-column-in-flutter","title":{"rendered":"Flutter : Vertically Center Column"},"content":{"rendered":"<p>By using the Center widget with a Column and setting the <strong>mainAxisAlignment<\/strong> property to <strong>MainAxisAlignment.center<\/strong>, all child widgets of the column will appear in the center of the screen.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"diff\">import 'package:flutter\/material.dart';\r\nimport 'dart:math';\r\nimport 'package:untitled2\/flutter_example.dart';\r\nvoid main() {\r\n runApp(const MyApp());\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\n const MyApp({super.key});\r\n @override\r\n Widget build(BuildContext context) {\r\n   return MaterialApp(\r\n     theme: ThemeData(\r\n       colorScheme: ColorScheme.fromSeed(\r\n         seedColor: Colors.deepPurple,\r\n       ),\r\n       useMaterial3: true,\r\n     ),\r\n     home: const HomePage(),\r\n   );\r\n }\r\n}\r\n\r\nclass HomePage extends StatelessWidget {\r\n const HomePage({super.key});\r\n @override\r\n Widget build(BuildContext context) {\r\n   return Scaffold(\r\n     body: Center(\r\n       child: Column(\r\n         mainAxisAlignment: MainAxisAlignment.center,\r\n         children: [\r\n           Text(\r\n             'Hello World',\r\n             style: TextStyle(\r\n               fontSize: 20,\r\n               fontWeight: FontWeight.w500,\r\n             ),\r\n           )\r\n         ],\r\n       ),\r\n     ),\r\n   );\r\n }\r\n}\r\n<\/pre>\n<h3>Output:<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/05\/09062205\/unnamed-3-485x1024.png\" alt=\"output\" width=\"485\" height=\"1024\" class=\"alignright size-large wp-image-12290\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/05\/09062205\/unnamed-3-485x1024.png 485w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/05\/09062205\/unnamed-3-142x300.png 142w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/05\/09062205\/unnamed-3-768x1622.png 768w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/05\/09062205\/unnamed-3-728x1536.png 728w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/05\/09062205\/unnamed-3.png 970w\" sizes=\"(max-width: 485px) 100vw, 485px\" \/><\/p>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/flutter-bloc-tutorial\" target=\"_blank\">Flutter BLoC Tutorial<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>By using the Center widget with a Column and setting the mainAxisAlignment property to MainAxisAlignment.center, all child widgets of the column will appear in the center of the screen. import &#8216;package:flutter\/material.dart&#8217;; import &#8216;dart:math&#8217;; import &#8216;package:untitled2\/flutter_example.dart&#8217;; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12289,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-12288","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12288"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12288"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12288\/revisions"}],"predecessor-version":[{"id":12392,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12288\/revisions\/12392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12289"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}