# Column Class in Flutter
###### tags: `flutter_widget`

> [Whole Note Link](https://hackmd.io/6MJMhshwRfaHUTnXmjHjaA)
> [Official API Website of **Column** Widget](https://api.flutter.dev/flutter/widgets/Column-class.html)
>

## Basic information
1. A widget which displays its children in vertical way
2. Wrap child in **Expanded** widget to make child to fill available vertical room
3. It is an unscrollable widget
- **ListView** is scrollable widget (when the room is insufficient)
4. Using **Align** or **Center** to posotion the child (if there is only one child)
<br>

## Common Problems ([Official Website Explaination](https://api.flutter.dev/flutter/widgets/Column-class.html#Troubleshooting))
1. Unbounded constraints
- ***Situation*** : When a **Column** widget has at least one **Expanded** or **Flexible** children and is in another widget that does not give a maximum height constraints, such as **Column** or **ListView**, a runtime exception will show up and say that there are non-zero flex children with having vertical constraints.
- ***Reason 1*** :
- When a **Column** is wrapped in another **Column** (inner **Column** is not wrapped by **Expanded** or **Flexible**), the inner **Column** is not limited in its space usage, so it can determine its own dimensions.
- ***Solution*** : Wrap the inner **Column** with **Expanded** to make it understand it should only take the space that outer **Column** gives.
- ***Reason 2*** :
- When a **Column** is wrapped in scrollable vertical widget, such as **ListView** and **Column** has **Expanded** or **Flexible** children, these children will take the infinite space from **ListView** (still unbounded)
- ***Solution*** : Remove the **Expanded** or **Flexible** child and give the specific sizes to each inner children
2. The yellow and black striped banner (Overflow)
- The contents of **Column** exceed amount of availible space.
- ***Solution*** : Use a **ListView** instead of **Column**
<br>

## Constructor

Column(
    {
        Key key,
        MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
        MainAxisSize mainAxisSize: MainAxisSize.max,
        CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
        TextDirection textDirection,
        VerticalDirection verticalDircetion.down,
        TextBaseline textBaseline,
        List<Widget> children: const []
    }
)

<br>

## Properties
### **List<Widget\> children :**
- Tree of children widgets

### **CrossAxisAlignment crossAxisAlignment :**
- Arrangement of children along the cross axis
- Constants :
- **baseline** : place children with their baseline aligned with the cross axis
- **center** : place children with their centers align with the middle of cross axis
- **end** : place children as close to the end of cross axis
- **start** : place children with their start edge aligned with the cross axis
- **strecth** : place children to fill the cross axis
- **values** :
- start : CrossAxisAlignment(0)
- end : CrossAxisAlignment(1)
- center : CrossAxisAlignment(2)
- stretch : CrossAxisAlignment(3)
- baseline : CrossAxisAlignment(4)

### **Axis direction : (should not change this)**
- This widget should be row, so do not change this
- The direction used for main axis
- Constants :
- **horizontal**
- **vertical**
- **values** :
- horizontal : Axis(0)
- vertical : Axis(1)

### **int hashCode :**
- Read-only constant
- The hash code of this object

### **Key key :**
- Used to control the replacement of one widget to another
- If the **runtimeType** and **key** property of two widgets are same (operator==), the old one will be replaced by the new one.

### **MainAxisAlignment mainAxisAlignment :**
- Arrangement of the children along the main axis
- Constants :
- **center** : place children to the middle of main axis
- **end** : place children to the end of main axis
- **spaceAround** : place free space evenly between children including the **half** space before and after the first and the last child
- **spaceBetween** : place free space evenly between children
- **spaceEvenly** : place free space evenly between children including the space before and after the first and the last child
- **start** : place children to the start of main axis
- **values** :
- start : MainAxisAlignment(0)
- end : MainAxisAlignment(1)
- center : MainAxisAlignment(2)
- spaceBetween : MainAxisAlignment(3)
- spaceAround : MainAxisAlignment(4)
- spaceEvenly : MainAxisAlignment(5)

### **MainAxisSize mainAxisSize :**
- The space main axis should take
- Constants :
- **max** : maximize the size of free space along the main axis
- **min** : minimize the size of free space along the main axis
- **values** :
- min : MainAxisSize(0)
- max : MainAxisSize(1)

### **Type runtimeType :**
- Read-only constant
- Representation of runtime type of the object

### **TextBaseline textbaseline :**
- The baseline this object should align
- Constants :
- **alphabetic** : horizontal line aligns the bottom of glyphs for alphabetic characters
- **ideographic** : horizontal line aligns ideographic characters
- **values** :
- alphabetic : TextBaseline(0)
- ideographic : TextBaseline(1)

### **TextDirection textDirection :**
- Horizontal directionality of children
- Also being influenced by axis ([Official Explaination](https://api.flutter.dev/flutter/widgets/Row/textDirection.html))
- Constants :
- **ltr** : text flows from left to right
- **rtl** : text flows from right to left
- **values**
- ltr : TextDirection(1)
- rtl : TextDirection(0)

### **VerticalDirection verticalDirection :**
- Vertical directionality of children
- Also being influenced by axis ([Official Explaination](https://api.flutter.dev/flutter/widgets/Row/verticalDirection.html))
- Constants :
- **down** : boxes should start at the top and stacked vertically toward the bottom
- **up** : boxes should start at the bottom and stacked vertically toward the top
- **values** :
- up : VerticalDirection(0)
- down : VerticalDirection(1)