📱 What is Flutter?

Flutter is Google's UI toolkit that uses Dart to build beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(context) => MaterialApp(home: Text('Hello Flutter!'));
}

Result:

Flutter app displays "Hello Flutter!" on screen

Flutter Core Concepts

🧩

Widgets

Everything is a widget in Flutter

Text('Hello'),
Button(onPressed: () {}),
Container(child: ...)

🔄

State Management

Manage app state and updates

StatefulWidget
setState(() {
  counter++;
});

🎨

Material Design

Beautiful pre-built components

MaterialApp(
  theme: ThemeData.light(),
  home: Scaffold(...)
)

🌐

Cross-Platform

One code, multiple platforms

// Runs on iOS, Android, Web
flutter build apk
flutter build web

🔹 Basic Flutter App Structure

Every Flutter app starts with a main function and widgets:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Welcome to Flutter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Hello, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                print('Button pressed!');
              },
              child: Text('Click Me'),
            ),
          ],
        ),
      ),
    );
  }
}

App Screen:

Welcome to Flutter

Hello, Flutter!

🔹 Stateful Widgets

Create interactive widgets that can change over time:

import 'package:flutter/material.dart';

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _resetCounter() {
    setState(() {
      _counter = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
        backgroundColor: Colors.purple,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(fontSize: 16),
            ),
            Text(
              '$_counter',
              style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _incrementCounter,
                  child: Text('Increment'),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  onPressed: _resetCounter,
                  child: Text('Reset'),
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Interactive Counter:

Counter App

You have pushed the button this many times:

5

🔹 Common Flutter Widgets

Essential widgets for building Flutter apps:

import 'package:flutter/material.dart';

class WidgetShowcase extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Widgets')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Text widgets
            Text('Large Title', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            Text('Subtitle', style: TextStyle(fontSize: 18, color: Colors.grey)),
            
            SizedBox(height: 20),
            
            // Container with decoration
            Container(
              width: double.infinity,
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.blue[100],
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Colors.blue),
              ),
              child: Text('This is a decorated container'),
            ),
            
            SizedBox(height: 20),
            
            // Row with icons
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(Icons.home, size: 40, color: Colors.blue),
                Icon(Icons.favorite, size: 40, color: Colors.red),
                Icon(Icons.settings, size: 40, color: Colors.grey),
              ],
            ),
            
            SizedBox(height: 20),
            
            // List of items
            Card(
              child: ListTile(
                leading: CircleAvatar(child: Text('A')),
                title: Text('List Item'),
                subtitle: Text('This is a subtitle'),
                trailing: Icon(Icons.arrow_forward),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

Widget Layout:

Large Title

Subtitle

This is a decorated container

🏠 ❤️ ⚙️

A List Item
This is a subtitle

Dart with Flutter