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

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

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

## Common problem : yellow abd black warning stripe [(Official Explaination)](https://api.flutter.dev/flutter/widgets/Row-class.html)
**Reason :** The cause is that non-flexible contents of the row are wider than row, so the space of row is overflowed.
When the space of row is overflowed, the widgets behind the widget causing overflowed will not show up.
**Solution :** wrap the widget causing overflowed in **Expanded** widget
<br>

## Constructor

Row(
    {
        Key key,
        MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
        MainAxisSize mainAxisSize: MainAxisSize.max,
        CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
        TextDirection textDirection,
        VerticalDirection verticalDirection: VerticalDirection.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)