Flutter Basics

Essential Flutter widgets: Container, Text, Row, Column.

Main Structure

import 'package:flutter/material.dart';

void main() {
    runApp(MyApp());
}

class MyApp extends StatelessWidget {
    Widget build(BuildContext context) {
        return MaterialApp(home: HomePage());
    }
}

Text Widget

# Basic text
Text('Hello Flutter')

# Styled text
Text(
    'Styled',
    style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
        color: Colors.blue
    )
)

Container

Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Text('Box')
)

# With padding
Container(
    padding: EdgeInsets.all(16),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10)
    )
)

Row & Column

# Row - horizontal
Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [Text('Item 1'), Text('Item 2')]
)

# Column - vertical
Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [Text('Item 1'), Text('Item 2')]
)