Dart is a programming language developed by Google. Flutter uses Dart because:

• Ahead-of-time (AOT) compilation for fast startup and execution
• Just-in-time (JIT) compilation enabling hot reload during development
• Garbage collection optimized for UI frameworks
• Single-threaded model with async support, perfect for UI applications
• Familiar syntax similar to Java/JavaScript, making it easy to learn

In Flutter, widgets are the basic building blocks of the UI. Everything you see on the screen is a widget - text, buttons, layouts, even the app itself. This includes:

• Structural elements (like Text, Button)
• Layout elements (like Row, Column, Stack)
• Styling elements (like Padding, Theme)

This unified approach simplifies development and makes the UI predictable and composable.

Flutter has two main types of widgets:

StatelessWidget: Immutable widgets that don't change once built

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello World');
  }
}

StatefulWidget: Widgets that can change their appearance in response to events

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;
  
  @override
  Widget build(BuildContext context) {
    return Text('Count: $count');
  }
}

StatelessWidget: Used when the UI doesn't need to change

class WelcomeMessage extends StatelessWidget {
  final String name;
  WelcomeMessage(this.name);
  
  @override
  Widget build(BuildContext context) {
    return Text('Welcome, $name!');
  }
}

StatefulWidget: Used when the UI needs to change based on user interaction or other events

class ToggleButton extends StatefulWidget {
  @override
  _ToggleButtonState createState() => _ToggleButtonState();
}

class _ToggleButtonState extends State<ToggleButton> {
  bool isPressed = false;
  
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => setState(() => isPressed = !isPressed),
      child: Text(isPressed ? 'ON' : 'OFF'),
    );
  }
}

In layout widgets:

• MainAxis: Primary direction of the layout
• CrossAxis: Perpendicular to the main axis

For Row: MainAxis is horizontal, CrossAxis is vertical
For Column: MainAxis is vertical, CrossAxis is horizontal

Column(
  mainAxisAlignment: MainAxisAlignment.center, // Vertical alignment
  crossAxisAlignment: CrossAxisAlignment.start, // Horizontal alignment
  children: [Text('Item 1'), Text('Item 2')],
)

Container: Multi-purpose widget for decoration, sizing, and positioning

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  padding: EdgeInsets.all(8),
  child: Text('Hello'),
)

SizedBox: Lightweight widget specifically for sizing and spacing

SizedBox(
  width: 100,
  height: 100,
  child: Text('Hello'),
)

Use SizedBox for simple sizing; Container when you need decoration or complex styling.

setState() is the most basic way to update the UI in a StatefulWidget. It tells Flutter that the widget's state has changed and the UI needs to be rebuilt.

void _incrementCounter() {
  setState(() {
    _counter++; // Modify state inside setState
  });
}

Important: Only call setState() in StatefulWidget, and only modify state variables inside the setState() callback.