Flutter Mobile Development
Build beautiful, natively compiled mobile applications for iOS and Android from a single Dart codebase.
MobileIntermediate20 min read
AI Summary
Quick context for Flutter Mobile Development
Flutter Mobile Development is a intermediate guide in Mobile. Build beautiful, natively compiled mobile applications for iOS and Android from a single Dart codebase.. Key topics: cross-platform, dart, flutter, mobile.
## Why Flutter?
Flutter is Google's UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. Its "everything is a widget" philosophy and hot reload capability make it one of the fastest ways to ship production-quality mobile apps.
Unlike React Native, Flutter renders its own widgets using the Skia engine, giving you pixel-perfect control and consistent behavior across platforms.
## Setting Up Your Environment
```bash
# Install Flutter SDK
git clone https://github.com/flutter/flutter.git -b stable
export PATH="$HOME/flutter/bin:$PATH"
# Verify installation
flutter doctor
# Create a new project
flutter create my_app
cd my_app
```
Flutter works well with **Visual Studio Code** using the Flutter extension, which provides autocomplete, debugging, and hot reload integration.
## Understanding the Widget Tree
Everything in Flutter is a widget. Widgets nest inside each other to form your UI tree.
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorSchemeSeed: Colors.indigo,
useMaterial3: true,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('My App')),
body: const Center(
child: Text('Hello, Flutter!', style: TextStyle(fontSize: 24)),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
);
}
}
```
## State Management
Choosing the right state management approach is critical for maintainable apps.
### setState (Local State)
For simple, page-level state, `setState` is sufficient.
```dart
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State createState() => _CounterPageState();
}
class _CounterPageState extends State {
int _count = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Count: $_count', style: const TextStyle(fontSize: 32)),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() => _count++),
child: const Icon(Icons.add),
),
);
}
}
```
### Riverpod (Scalable State)
For larger applications, Riverpod provides a robust, compile-safe approach to state management.
```dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
final counterProvider = StateNotifierProvider((ref) {
return CounterNotifier();
});
class CounterNotifier extends StateNotifier {
CounterNotifier() : super(0);
void increment() => state++;
void decrement() => state--;
void reset() => state = 0;
}
class CounterPage extends ConsumerWidget {
const CounterPage({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return Scaffold(
body: Center(
child: Text('Count: $count', style: const TextStyle(fontSize: 32)),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
heroTag: 'increment',
onPressed: () => ref.read(counterProvider.notifier).increment(),
child: const Icon(Icons.add),
),
const SizedBox(height: 8),
FloatingActionButton(
heroTag: 'decrement',
onPressed: () => ref.read(counterProvider.notifier).decrement(),
child: const Icon(Icons.remove),
),
],
),
);
}
}
```
## Navigation
Flutter supports both imperative and declarative routing.
```dart
// Named routes
MaterialApp(
routes: {
'/': (context) => const HomePage(),
'/details': (context) => const DetailsPage(),
},
);
// Navigate with arguments
Navigator.pushNamed(context, '/details', arguments: {'id': 42});
// Extract arguments
class DetailsPage extends StatelessWidget {
const DetailsPage({super.key});
@override
Widget build(BuildContext context) {
final args = ModalRoute.of(context)!.settings.arguments as Map;
return Scaffold(
body: Center(child: Text('Item ${args["id"]}')),
);
}
}
```
For production apps, consider the `go_router` package for declarative, URL-based routing with deep link support.
## Networking and Data
Use `http` or `dio` for API calls, and `json_serializable` for type-safe JSON parsing.
```dart
import 'package:http/http.dart' as http;
import 'dart:convert';
class Article {
final int id;
final String title;
final String body;
Article({required this.id, required this.title, required this.body});
factory Article.fromJson(Map json) {
return Article(
id: json['id'] as int,
title: json['title'] as String,
body: json['body'] as String,
);
}
}
Future> fetchArticles() async {
final resp http.get(Uri.parse('https://api.example.com/articles'));
if (response.statusCode == 200) {
final List data = jsonDecode(response.body);
return data.map((json) => Article.fromJson(json)).toList();
} else {
throw Exception('Failed to load articles');
}
}
```
## Persistent Storage
Flutter provides several options for local data persistence.
```dart
import 'package:shared_preferences/shared_preferences.dart';
// Key-value storage for simple settings
final prefs = await SharedPreferences.getInstance();
await prefs.setString('theme', 'dark');
await prefs.setBool('notifications_enabled', true);
final theme = prefs.getString('theme') ?? 'light';
```
For structured data, use `sqflite` (SQLite) or `hive` for a lightweight NoSQL option.
## Building and Deploying
```bash
# Build for Android
flutter build apk --release
flutter build appbundle --release
# Build for iOS (requires macOS and Xcode)
flutter build ios --release
# Run tests
flutter test
# Analyze code for issues
flutter analyze
```
## Design-to-Code Workflow
Tools like **Figma** can accelerate your UI development. Export design tokens (colors, spacing, typography) as Dart constants to keep your implementation aligned with the design system.
```dart
class AppColors {
static const primary = Color(0xFF6366F1);
static const background = Color(0xFFFFFFFF);
static const surface = Color(0xFFF8FAFC);
static const error = Color(0xFFEF4444);
}
class AppSpacing {
static const double xs = 4.0;
static const double sm = 8.0;
static const double md = 16.0;
static const double lg = 24.0;
static const double xl = 32.0;
}
```
## Best Practices
- Keep widgets small and composable — extract reusable components early.
- Use `const` constructors wherever possible for performance.
- Prefer `ConsumerWidget` over `StatefulWidget` when using Riverpod.
- Write widget tests alongside implementation for confident refactoring.
- Profile your app with Flutter DevTools to catch jank and memory issues.
## Next Steps
Explore platform channels for native code integration, Firebase for backend services, and the Flutter web and desktop targets for true cross-platform coverage.
Continue with related content
Suggested next reads and tools from the knowledge graph.