Flutter

.

1. Understanding Flutter UI Basics

• Widgets: Everything in Flutter is a widget (like View in SwiftUI).

Two Types of Widgets:

• StatelessWidget: Immutable UI (doesn’t change over time).
• StatefulWidget: Mutable UI (updates dynamically).

2. Create a Simple UI

Let’s start by building a simple UI with Text, Column, Row, and ElevatedButton.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter UI Demo'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Hello, Niraj!',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                print('Button Pressed!');
              },
              child: Text('Press Me'),
            ),
          ],
        ),
      ),
    );
  }
}

3. Breakdown of UI Components