Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Developers Point

Difference between the Flutter CrossAxisAlignment and MainAxisAlignment

June 28, 2020
in Developers Point
2 min read
cross axis alignment and main axis alignment

Sometimes it can be so confusing and frustrating to differentiate between the MainAxisAlignment in Flutter and the CrossAxisAlignment. But then, here’s a detailed explanation and guide that would guide you to understand the MainAxisAlignment and CrossAxisAlignment.

RELATED FLUTTER RESOURCES

How To Prompt User To Update App In Flutter

How To Create and Run Dart Code in Console Using VSCode?

Understanding Flutter forEach(), map(), where()

The mainAxisAlignment simply controls the children to show in the horizontal direction of the Row, But controls the vertical direction of the Column. Let’s look at the picture with its types.

For crossAxisAlignment The direction of this parameter is the perpendicular with the mainAxisAlignment. You can see the relationship between them.

ADVERTISEMENT

These two alignment works mostly when you apply your ROW and COLUMN, therefore See it as

  • Social Media Sign-In Buttons in Flutter (Facebook, Twitter, Google, etc)

Column

  • to center(or align) vertically, mainAxisAlignment is used.
  • to center(or align) horizontally, crossAxisAlignment is used.

Row

  • to center(or align) horizontally, mainAxisAlignment is used.
  • to center(or align) vertically, crossAxisAlignment is used.

The Image below should give a better illustration on the difference between the MainAxis and CrossAxis.

mainaxisalignment crossaxisalignment

RelatedFlutter Resource

How To Prompt User To Update App In Flutter
Dart

How To Prompt User To Update App In Flutter

August 16, 2020
How To Create and Run Dart Code in Console Using VSCode?
Dart

How To Create and Run Dart Code in Console Using VSCode?

August 10, 2020
forEach map where flutter
Dart

Understanding Flutter forEach(), map(), where()

August 3, 2020
flutter future async await
Dart

Flutter Future, Await, and Async – All You Need To Know

July 21, 2020
5+ Important Reasons Why Every Developer Should Start a Blog
Developers Point

5+ Important Reasons Why Every Developer Should Start a Blog

June 23, 2020
Next Post
flutter progress indicator

Integrate Percent Indicator in Flutter (Circular & Linear)

Customizable App Introduction Slider for Flutter (OnBoarding)

Customizable App Introduction Slider for Flutter (OnBoarding)

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

A Flutter App for Tracking Funds/Money – Budget Tracker

A Flutter App for Tracking Funds/Money – Budget Tracker

August 17, 2020
Create Stories like Instagram & WhatsApp Status – Flutter Package

Create Stories like Instagram & WhatsApp Status – Flutter Package

August 9, 2020
A Music Mp3 Streaming and Downloading App made with Flutter

A Music Mp3 Streaming and Downloading App made with Flutter

August 16, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In