Flutter App Development

Flutter App Development Note

1. Introduction to Flutter

Flutter is an open-source UI toolkit by Google for building natively compiled applications for mobile, web, and desktop from a single codebase.
Uses Dart programming language.
Provides fast development, expressive UI, and native performance.
Compiles ahead-of-time (AOT) for faster app startup on mobile.

Key Features:

Hot Reload & Hot Restart
Rich set of pre-built widgets
Cross-platform development
Access to native features using plugins

2. Flutter Architecture

Flutter’s architecture has 3 main layers:

Framework (Dart):
- Built with Dart.
- Provides widgets, gestures, animations, rendering.
- Includes Material Design and Cupertino widgets.
Engine (C++):
- Responsible for rendering (Skia graphics engine).
- Handles text layout, graphics, file I/O, networking, plugins.
Embedder:
- Connects Flutter to the underlying OS (Android, iOS, Web, Desktop).

Flow:

Dart Code (Widgets, Logic) -> Flutter Framework -> Engine -> Platform

3. Dart Programming Basics

Flutter uses Dart, so knowing Dart is essential.

Data Types:

int, double, String, bool, dynamic
Lists, Sets, Maps

Functions:

int add(int a, int b) {
  return a + b;
}

Classes & Objects:

class Person {
  String name;
  int age;
  Person(this.name, this.age);
}

Asynchronous Programming:

async, await, Future, Stream

4. Flutter Widgets

Everything in Flutter is a widget.

Types of Widgets

Stateless Widget
- Immutable, does not maintain state.
class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Hello Flutter'); } }
Stateful Widget
- Mutable, can update UI dynamically.
class Counter extends StatefulWidget { @override _CounterState createState() => _CounterState(); } class _CounterState extends State<Counter> { int count = 0; @override Widget build(BuildContext context) { return ElevatedButton( onPressed: () { setState(() { count++; }); }, child: Text('$count'), ); } }

Common Widgets

Text – Display text
Container – Box with padding, margin, color
Row & Column – Layout widgets horizontally/vertically
Stack – Overlay widgets
ListView – Scrollable list
GridView – Grid layout
Image – Display image from asset/network

5. Layout & Styling

Flutter uses composition instead of CSS.
Padding, Margin, Alignment, Flex control layout.
BoxDecoration handles background, borders, gradients.
Themes manage consistent styling.

Example:

Container(
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(5),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('Styled Container', style: TextStyle(color: Colors.white)),
)

6. Navigation & Routing

Flutter uses Navigator for screen navigation.

Push – Navigate to new screen
Pop – Go back to previous screen

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

Navigator.pop(context);

Named routes can also be used for larger apps.

7. State Management

Managing state is crucial for dynamic apps.

Common Approaches

setState() – Built-in simple state management.
Provider – Recommended by Google for scalable apps.
Bloc (Business Logic Component) – Event-driven architecture.
Riverpod, GetX, MobX – Other modern state management libraries.

8. Networking & API

Use http package to fetch data from REST APIs.
Use jsonDecode() to parse JSON.

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

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  if (response.statusCode == 200) {
    var data = jsonDecode(response.body);
    print(data);
  }
}

For advanced networking: dio package (interceptors, logging).

9. Local Storage

SharedPreferences – Key-value storage
SQLite – Local relational database (sqflite package)
Hive – Lightweight NoSQL database

Example with SharedPreferences:

import 'package:shared_preferences/shared_preferences.dart';

Future<void> saveData() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('username', 'FlutterDev');
}

10. Flutter Animations

Implicit animations – Simple, automatic (e.g., AnimatedContainer, AnimatedOpacity)
Explicit animations – Fine-grained control (AnimationController, Tween)