Flutter Tutorial

Master Flutter and Dart to build beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Video Tutorial

Introduction to Flutter

Flutter is Google's UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. It uses the Dart programming language.

Examples:

// Install Flutter
// Download from https://flutter.dev

// Verify installation
flutter doctor

// Create new Flutter project
flutter create my_app

// Run the app
cd my_app
flutter run

Setting up Flutter development environment

Dart Basics

Dart is the programming language used by Flutter. Learn the fundamentals before diving into Flutter development.

Examples:

void main() {
  // Variables
  var name = 'Flutter';
  String framework = 'Mobile Development';
  int version = 3;
  
  // Print
  print('$name for $framework');
  
  // Functions
  String greet(String name) {
    return 'Hello, $name!';
  }
  
  print(greet('Developer'));
  
  // Lists
  List<String> frameworks = ['Flutter', 'React Native', 'Ionic'];
  frameworks.forEach((f) => print(f));
  
  // Maps
  Map<String, dynamic> app = {
    'name': 'My App',
    'version': 1.0,
    'isPublished': false,
  };
}

Basic Dart syntax and data types

Widgets and Layouts

Everything in Flutter is a widget. Learn how to build UIs using Flutter's rich set of widgets.

Examples:

import 'package:flutter/material.dart';

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

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

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

Basic Flutter app structure with widgets

Stateful Widgets

Learn how to create interactive widgets that can change their state and update the UI dynamically.

Examples:

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++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(fontSize: 16),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Stateful widget with counter example

Navigation and Routing

Implement navigation between screens in Flutter using Navigator and named routes.

Examples:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomeScreen(),
      '/details': (context) => DetailsScreen(),
    },
  ));
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details'),
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Navigation with named routes

HTTP Requests and API Integration

Learn how to fetch data from APIs and display it in your Flutter app using the http package.

Examples:

// Add to pubspec.yaml:
// dependencies:
//   http: ^0.13.5

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class DataFetchScreen extends StatefulWidget {
  @override
  _DataFetchScreenState createState() => _DataFetchScreenState();
}

class _DataFetchScreenState extends State<DataFetchScreen> {
  List<dynamic> posts = [];
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    final response = await http.get(
      Uri.parse('https://jsonplaceholder.typicode.com/posts')
    );
    
    if (response.statusCode == 200) {
      setState(() {
        posts = json.decode(response.body);
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('API Data')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(posts[index]['title']),
                  subtitle: Text(posts[index]['body']),
                );
              },
            ),
    );
  }
}

Fetching and displaying API data

Quick Reference

Essential Commands

flutter create - Create new project
flutter run - Run the app
flutter doctor - Check setup
flutter pub get - Install dependencies

Best Practices

✓ Use const constructors when possible
✓ Extract widgets for reusability
✓ Use StatefulWidget only when needed
✓ Follow Material Design guidelines