Flutter Tutorial

🚀 Welcome to Flutter

Flutter is Google's open-source UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase using the Dart programming language.


// Your first Flutter widget
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text('Hello Flutter!'),
    );
  }
}

Why Learn Flutter?

⚡

Fast Development

Hot reload lets you see changes instantly without losing app state

🎨

Beautiful UI

Rich set of customizable widgets for stunning interfaces

📱

Cross-Platform

Write once, run on iOS, Android, web, and desktop

🚀

Native Performance

Compiled to native code for smooth 60fps animations

🔹 What You'll Learn

Flutter Basics: Understanding widgets, layouts, and app structure
Dart Language: Variables, functions, classes, and object-oriented programming
UI Development: Creating beautiful interfaces with Material Design
State Management: Managing app data and user interactions
Navigation: Moving between screens and routes
APIs & Data: Fetching data and working with databases

🔹 Simple Flutter Example

Here's a basic Flutter app with a button:


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button pressed!');
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

Output:

My First App

🔹 Flutter Features

Flutter provides powerful features for modern app development:

🔸 Hot Reload


// Change this text
Text('Hello World')

// Save the file, and instantly see:
Text('Hello Flutter!')
// No need to restart the app!

🔸 Rich Widget Library


// Material Design widgets
ElevatedButton()
TextField()
Card()
AppBar()

// Cupertino (iOS-style) widgets
CupertinoButton()
CupertinoTextField()
CupertinoNavigationBar()

🔹 Who Uses Flutter?

Flutter is trusted by major companies worldwide:

Google: Google Ads, Google Pay
Alibaba: E-commerce platform
BMW: Connected car apps
eBay: Motors app
Nubank: Banking application