Flutter has emerged as a leading framework for cross-platform mobile development, enabling developers to create beautiful, high-performance applications for iOS, Android, web, and desktop from a single codebase. This comprehensive guide takes you through the complete journey from Flutter basics to deploying production-ready applications.
Flutter's unique architecture sets it apart from other cross-platform frameworks:
Everything is a Widget: Flutter's core principle where UI elements, layouts, and even app themes are widgets.
Rendering Pipeline: Flutter renders directly to the canvas, bypassing platform UI components for consistent performance.
Dart Language: Optimized for UI development with features like hot reload and ahead-of-time compilation.
Flutter applications are built using a tree of widgets:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Production App',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Production Flutter App'),
elevation: 0,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
style: Theme.of(context).textTheme.headline6,
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Create reusable, customizable widgets for consistent UI:
class CustomButton extends StatelessWidget {
final String text;
final VoidCallback? onPressed;
final Color? backgroundColor;
final Color? textColor;
final double? fontSize;
final EdgeInsets? padding;
final BorderRadius? borderRadius;
const CustomButton({
Key? key,
required this.text,
this.onPressed,
this.backgroundColor,
this.textColor,
this.fontSize,
this.padding,
this.borderRadius,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: backgroundColor ?? Theme.of(context).primaryColor,
borderRadius: borderRadius ?? BorderRadius.circular(8.0),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
spreadRadius: 1,
blurRadius: 3,
offset: Offset(0, 2),
),
],
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onPressed,
borderRadius: borderRadius ?? BorderRadius.circular(8.0),
child: Padding(
padding: padding ?? EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Center(
child: Text(
text,
style: TextStyle(
color: textColor ?? Colors.white,
fontSize: fontSize ?? 16,
fontWeight: FontWeight.w600,
),
),
),
),
),
),
);
}
}
Build adaptive layouts that work across different screen sizes:
class ResponsiveLayout extends StatelessWidget {
final Widget mobile;
final Widget? tablet;
final Widget? desktop;
const ResponsiveLayout({
Key? key,
required this.mobile,
this.tablet,
this.desktop,
}) : super(key: key);
static bool isMobile(BuildContext context) =>
MediaQuery.of(context).size.width < 768;
static bool isTablet(BuildContext context) =>
MediaQuery.of(context).size.width >= 768 &&
MediaQuery.of(context).size.width < 1200;
static bool isDesktop(BuildContext context) =>
MediaQuery.of(context).size.width >= 1200;
@override
Widget build(BuildContext context) {
if (isDesktop(context) && desktop != null) {
return desktop!;
} else if (isTablet(context) && tablet != null) {
return tablet!;
} else {
return mobile;
}
}
}
// Usage example
class ProductGrid extends StatelessWidget {
final List<Product> products;
const ProductGrid({Key? key, required this.products}) : super(key: key);
@override
Widget build(BuildContext context) {
return ResponsiveLayout(
mobile: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.8,
),
itemCount: products.length,
itemBuilder: (context, index) => ProductCard(product: products[index]),
),
tablet: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 0.8,
),
itemCount: products.length,
itemBuilder: (context, index) => ProductCard(product: products[index]),
),
desktop: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
childAspectRatio: 0.8,
),
itemCount: products.length,
itemBuilder: (context, index) => ProductCard(product: products[index]),
),
);
}
}
Implement scalable state management using Provider:
// models/user.dart
class User {
final String id;
final String name;
final String email;
final String? avatarUrl;
User({
required this.id,
required this.name,
required this.email,
this.avatarUrl,
});
factory User.fromJson(Map<String, dynamic> json) {
return User(
id: json['id'],
name: json['name'],
email: json['email'],
avatarUrl: json['avatarUrl'],
);
}
Map<String, dynamic> toJson() {
return {
'id': id,
'name': name,
'email': email,
'avatarUrl': avatarUrl,
};
}
}
// providers/auth_provider.dart
class AuthProvider extends ChangeNotifier {
User? _user;
bool _isLoading = false;
String? _error;
User? get user => _user;
bool get isLoading => _isLoading;
String? get error => _error;
bool get isAuthenticated => _user != null;
Future<void> login(String email, String password) async {
_setLoading(true);
_clearError();
try {
// Simulate API call
await Future.delayed(Duration(seconds: 2));
if (email == '[email protected]' && password == 'password') {
_user = User(
id: '1',
name: 'John Doe',
email: email,
avatarUrl: 'https://example.com/avatar.jpg',
);
} else {
throw Exception('Invalid credentials');
}
} catch (e) {
_error = e.toString();
} finally {
_setLoading(false);
}
}
Future<void> logout() async {
_user = null;
notifyListeners();
}
void _setLoading(bool loading) {
_isLoading = loading;
notifyListeners();
}
void _clearError() {
_error = null;
notifyListeners();
}
}
// screens/login_screen.dart
class LoginScreen extends StatelessWidget {
final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Login')),
body: Padding(
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextFormField(
controller: _emailController,
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
validator: (value) {
if (value?.isEmpty ?? true) {
return 'Please enter email';
}
return null;
},
),
SizedBox(height: 16),
TextFormField(
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
obscureText: true,
validator: (value) {
if (value?.isEmpty ?? true) {
return 'Please enter password';
}
return null;
},
),
SizedBox(height: 24),
Consumer<AuthProvider>(
builder: (context, authProvider, child) {
return Column(
children: [
if (authProvider.error != null)
Padding(
padding: EdgeInsets.only(bottom: 16),
child: Text(
authProvider.error!,
style: TextStyle(color: Colors.red),
),
),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: authProvider.isLoading
? null
: () => _handleLogin(context, authProvider),
child: authProvider.isLoading
? CircularProgressIndicator()
: Text('Login'),
),
),
],
);
},
),
],
),
),
),
);
}
void _handleLogin(BuildContext context, AuthProvider authProvider) async {
if (_formKey.currentState?.validate() ?? false) {
await authProvider.login(
_emailController.text,
_passwordController.text,
);
if (authProvider.isAuthenticated) {
Navigator.of(context).pushReplacementNamed('/home');
}
}
}
}
Implement BLoC pattern for complex business logic:
// events/product_event.dart
abstract class ProductEvent {}
class LoadProducts extends ProductEvent {}
class SearchProducts extends ProductEvent {
final String query;
SearchProducts(this.query);
}
class AddProduct extends ProductEvent {
final Product product;
AddProduct(this.product);
}
// states/product_state.dart
abstract class ProductState {}
class ProductInitial extends ProductState {}
class ProductLoading extends ProductState {}
class ProductLoaded extends ProductState {
final List<Product> products;
ProductLoaded(this.products);
}
class ProductError extends ProductState {
final String message;
ProductError(this.message);
}
// blocs/product_bloc.dart
class ProductBloc extends Bloc<ProductEvent, ProductState> {
final ProductRepository _repository;
ProductBloc(this._repository) : super(ProductInitial()) {
on<LoadProducts>(_onLoadProducts);
on<SearchProducts>(_onSearchProducts);
on<AddProduct>(_onAddProduct);
}
void _onLoadProducts(LoadProducts event, Emitter<ProductState> emit) async {
emit(ProductLoading());
try {
final products = await _repository.getProducts();
emit(ProductLoaded(products));
} catch (e) {
emit(ProductError(e.toString()));
}
}
void _onSearchProducts(SearchProducts event, Emitter<ProductState> emit) async {
emit(ProductLoading());
try {
final products = await _repository.searchProducts(event.query);
emit(ProductLoaded(products));
} catch (e) {
emit(ProductError(e.toString()));
}
}
void _onAddProduct(AddProduct event, Emitter<ProductState> emit) async {
try {
await _repository.addProduct(event.product);
add(LoadProducts()); // Reload products
} catch (e) {
emit(ProductError(e.toString()));
}
}
}
Implement robust HTTP client with error handling:
// services/api_client.dart
class ApiClient {
late final Dio _dio;
static const String baseUrl = 'https://api.example.com';
ApiClient() {
_dio = Dio(BaseOptions(
baseUrl: baseUrl,
connectTimeout: 30000,
receiveTimeout: 30000,
headers: {
'Content-Type': 'application/json',
},
));
_dio.interceptors.add(LogInterceptor(
requestBody: true,
responseBody: true,
));
_dio.interceptors.add(InterceptorsWrapper(
onRequest: (options, handler) {
// Add auth token if available
final token = _getAuthToken();
if (token != null) {
options.headers['Authorization'] = 'Bearer $token';
}
handler.next(options);
},
onError: (error, handler) {
_handleError(error);
handler.next(error);
},
));
}
String? _getAuthToken() {
// Get token from secure storage
return null; // Implement token retrieval
}
void _handleError(DioError error) {
switch (error.type) {
case DioErrorType.connectTimeout:
case DioErrorType.sendTimeout:
case DioErrorType.receiveTimeout:
throw TimeoutException('Connection timeout');
case DioErrorType.response:
_handleResponseError(error.response?.statusCode);
break;
case DioErrorType.cancel:
throw RequestCancelledException('Request cancelled');
case DioErrorType.other:
throw NetworkException('Network error');
}
}
void _handleResponseError(int? statusCode) {
switch (statusCode) {
case 401:
throw UnauthorizedException('Unauthorized');
case 403:
throw ForbiddenException('Forbidden');
case 404:
throw NotFoundException('Not found');
case 500:
throw ServerException('Internal server error');
default:
throw ApiException('API error: $statusCode');
}
}
Future<T> get<T>(String path, {Map<String, dynamic>? queryParameters}) async {
try {
final response = await _dio.get(path, queryParameters: queryParameters);
return response.data;
} catch (e) {
rethrow;
}
}
Future<T> post<T>(String path, {dynamic data}) async {
try {
final response = await _dio.post(path, data: data);
return response.data;
} catch (e) {
rethrow;
}
}
Future<T> put<T>(String path, {dynamic data}) async {
try {
final response = await _dio.put(path, data: data);
return response.data;
} catch (e) {
rethrow;
}
}
Future<T> delete<T>(String path) async {
try {
final response = await _dio.delete(path);
return response.data;
} catch (e) {
rethrow;
}
}
}
Implement repository pattern for data abstraction:
// repositories/product_repository.dart
abstract class ProductRepository {
Future<List<Product>> getProducts();
Future<Product> getProductById(String id);
Future<List<Product>> searchProducts(String query);
Future<Product> addProduct(Product product);
Future<Product> updateProduct(Product product);
Future<void> deleteProduct(String id);
}
class ProductRepositoryImpl implements ProductRepository {
final ApiClient _apiClient;
final LocalStorageService _localStorage;
ProductRepositoryImpl(this._apiClient, this._localStorage);
@override
Future<List<Product>> getProducts() async {
try {
final response = await _apiClient.get<Map<String, dynamic>>('/products');
final productsJson = response['data'] as List;
return productsJson.map((json) => Product.fromJson(json)).toList();
} catch (e) {
// Fallback to cached data
final cachedProducts = await _localStorage.getCachedProducts();
if (cachedProducts.isNotEmpty) {
return cachedProducts;
}
rethrow;
}
}
@override
Future<Product> getProductById(String id) async {
final response = await _apiClient.get<Map<String, dynamic>>('/products/$id');
return Product.fromJson(response['data']);
}
@override
Future<List<Product>> searchProducts(String query) async {
final response = await _apiClient.get<Map<String, dynamic>>(
'/products/search',
queryParameters: {'q': query},
);
final productsJson = response['data'] as List;
return productsJson.map((json) => Product.fromJson(json)).toList();
}
@override
Future<Product> addProduct(Product product) async {
final response = await _apiClient.post<Map<String, dynamic>>(
'/products',
data: product.toJson(),
);
return Product.fromJson(response['data']);
}
@override
Future<Product> updateProduct(Product product) async {
final response = await _apiClient.put<Map<String, dynamic>>(
'/products/${product.id}',
data: product.toJson(),
);
return Product.fromJson(response['data']);
}
@override
Future<void> deleteProduct(String id) async {
await _apiClient.delete('/products/$id');
}
}
Implement comprehensive unit tests:
// test/blocs/product_bloc_test.dart
void main() {
group('ProductBloc', () {
late ProductBloc productBloc;
late MockProductRepository mockRepository;
setUp(() {
mockRepository = MockProductRepository();
productBloc = ProductBloc(mockRepository);
});
tearDown(() {
productBloc.close();
});
test('initial state is ProductInitial', () {
expect(productBloc.state, ProductInitial());
});
blocTest<ProductBloc, ProductState>(
'emits [ProductLoading, ProductLoaded] when LoadProducts is added',
build: () {
when(() => mockRepository.getProducts())
.thenAnswer((_) async => [Product.mock()]);
return productBloc;
},
act: (bloc) => bloc.add(LoadProducts()),
expect: () => [
ProductLoading(),
isA<ProductLoaded>(),
],
);
blocTest<ProductBloc, ProductState>(
'emits [ProductLoading, ProductError] when LoadProducts fails',
build: () {
when(() => mockRepository.getProducts())
.thenThrow(Exception('Failed to load'));
return productBloc;
},
act: (bloc) => bloc.add(LoadProducts()),
expect: () => [
ProductLoading(),
isA<ProductError>(),
],
);
});
}
Test widget behavior and UI interactions:
// test/widgets/product_card_test.dart
void main() {
group('ProductCard', () {
testWidgets('displays product information correctly', (tester) async {
final product = Product(
id: '1',
name: 'Test Product',
price: 99.99,
imageUrl: 'https://example.com/image.jpg',
);
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: ProductCard(product: product),
),
),
);
expect(find.text('Test Product'), findsOneWidget);
expect(find.text('\$99.99'), findsOneWidget);
expect(find.byType(CachedNetworkImage), findsOneWidget);
});
testWidgets('calls onTap when tapped', (tester) async {
final product = Product.mock();
var tapped = false;
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: ProductCard(
product: product,
onTap: () => tapped = true,
),
),
),
);
await tester.tap(find.byType(ProductCard));
expect(tapped, true);
});
});
}
Test complete user flows:
// test_driver/app_test.dart
void main() {
group('App Integration Tests', () {
FlutterDriver? driver;
setUpAll(() async {
driver = await FlutterDriver.connect();
});
tearDownAll(() async {
await driver?.close();
});
test('complete login flow', () async {
// Navigate to login screen
await driver!.tap(find.byValueKey('login_button'));
// Enter credentials
await driver!.tap(find.byValueKey('email_field'));
await driver!.enterText('[email protected]');
await driver!.tap(find.byValueKey('password_field'));
await driver!.enterText('password');
// Submit form
await driver!.tap(find.byValueKey('submit_button'));
// Verify navigation to home screen
await driver!.waitFor(find.byValueKey('home_screen'));
});
test('product search functionality', () async {
// Tap search field
await driver!.tap(find.byValueKey('search_field'));
await driver!.enterText('laptop');
// Wait for search results
await driver!.waitFor(find.byValueKey('search_results'));
// Verify results are displayed
expect(await driver!.getText(find.byValueKey('results_count')),
contains('results'));
});
});
}
Implement performance-optimized widgets:
// Optimized list widget
class OptimizedProductList extends StatelessWidget {
final List<Product> products;
const OptimizedProductList({Key? key, required this.products})
: super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: products.length,
cacheExtent: 500, // Pre-cache items
itemBuilder: (context, index) {
return ProductListItem(
key: ValueKey(products[index].id),
product: products[index],
);
},
);
}
}
// Optimized list item with const constructor
class ProductListItem extends StatelessWidget {
final Product product;
const ProductListItem({Key? key, required this.product}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: ListTile(
leading: CachedNetworkImage(
imageUrl: product.imageUrl,
width: 60,
height: 60,
fit: BoxFit.cover,
placeholder: (context, url) => Container(
width: 60,
height: 60,
color: Colors.grey[300],
child: Icon(Icons.image),
),
),
title: Text(product.name),
subtitle: Text('\$${product.price.toStringAsFixed(2)}'),
trailing: Icon(Icons.arrow_forward_ios),
onTap: () => _navigateToDetail(context),
),
);
}
void _navigateToDetail(BuildContext context) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ProductDetailScreen(product: product),
),
);
}
}
Implement efficient memory management:
// Image caching configuration
class ImageCacheManager {
static void configure() {
PaintingBinding.instance.imageCache.maximumSize = 100;
PaintingBinding.instance.imageCache.maximumSizeBytes = 50 << 20; // 50MB
}
static void clearCache() {
PaintingBinding.instance.imageCache.clear();
PaintingBinding.instance.imageCache.clearLiveImages();
}
}
// Dispose controllers properly
class FormScreen extends StatefulWidget {
@override
_FormScreenState createState() => _FormScreenState();
}
class _FormScreenState extends State<FormScreen> {
late TextEditingController _nameController;
late TextEditingController _emailController;
late StreamSubscription _subscription;
@override
void initState() {
super.initState();
_nameController = TextEditingController();
_emailController = TextEditingController();
_subscription = someStream.listen((data) {
// Handle data
});
}
@override
void dispose() {
_nameController.dispose();
_emailController.dispose();
_subscription.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
TextField(controller: _nameController),
TextField(controller: _emailController),
],
),
);
}
}
Implement camera functionality:
// services/camera_service.dart
class CameraService {
final ImagePicker _picker = ImagePicker();
Future<File?> takePicture() async {
try {
final XFile? photo = await _picker.pickImage(
source: ImageSource.camera,
maxWidth: 1800,
maxHeight: 1800,
imageQuality: 80,
);
return photo != null ? File(photo.path) : null;
} catch (e) {
throw CameraException('Failed to take picture: $e');
}
}
Future<File?> pickFromGallery() async {
try {
final XFile? image = await _picker.pickImage(
source: ImageSource.gallery,
maxWidth: 1800,
maxHeight: 1800,
imageQuality: 80,
);
return image != null ? File(image.path) : null;
} catch (e) {
throw GalleryException('Failed to pick image: $e');
}
}
Future<List<File>> pickMultipleImages() async {
try {
final List<XFile> images = await _picker.pickMultiImage(
maxWidth: 1800,
maxHeight: 1800,
imageQuality: 80,
);
return images.map((xfile) => File(xfile.path)).toList();
} catch (e) {
throw GalleryException('Failed to pick images: $e');
}
}
}
Implement local data persistence:
// services/storage_service.dart
class StorageService {
static const String _userDataKey = 'user_data';
static const String _settingsKey = 'app_settings';
static late SharedPreferences _prefs;
static late Database _database;
static Future<void> initialize() async {
_prefs = await SharedPreferences.getInstance();
_database = await _initDatabase();
}
static Future<Database> _initDatabase() async {
final documentsDirectory = await getApplicationDocumentsDirectory();
final path = join(documentsDirectory.path, 'app_database.db');
return await openDatabase(
path,
version: 1,
onCreate: (db, version) async {
await db.execute('''
CREATE TABLE products(
id TEXT PRIMARY KEY,
name TEXT NOT NULL,
price REAL NOT NULL,
description TEXT,
image_url TEXT,
created_at TEXT
)
''');
},
);
}
// Shared Preferences methods
static Future<void> saveUserData(User user) async {
await _prefs.setString(_userDataKey, jsonEncode(user.toJson()));
}
static User? getUserData() {
final userData = _prefs.getString(_userDataKey);
if (userData != null) {
return User.fromJson(jsonDecode(userData));
}
return null;
}
static Future<void> saveSettings(AppSettings settings) async {
await _prefs.setString(_settingsKey, jsonEncode(settings.toJson()));
}
static AppSettings getSettings() {
final settingsData = _prefs.getString(_settingsKey);
if (settingsData != null) {
return AppSettings.fromJson(jsonDecode(settingsData));
}
return AppSettings.defaultSettings();
}
// Database methods
static Future<List<Product>> getCachedProducts() async {
final List<Map<String, dynamic>> maps = await _database.query('products');
return List.generate(maps.length, (i) {
return Product.fromJson(maps[i]);
});
}
static Future<void> cacheProducts(List<Product> products) async {
final batch = _database.batch();
// Clear existing data
batch.delete('products');
// Insert new data
for (final product in products) {
batch.insert('products', product.toJson());
}
await batch.commit();
}
static Future<void> clearCache() async {
await _database.delete('products');
}
}
Configure Android app for release:
// android/app/build.gradle
android {
compileSdkVersion 33
defaultConfig {
applicationId "com.example.myapp"
minSdkVersion 21
targetSdkVersion 33
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
signingConfigs {
release {
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
storePassword keystoreProperties['storePassword']
}
}
buildTypes {
release {
signingConfig signingConfigs.release
minifyEnabled true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
Build commands for Android:
# Generate signing key
keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload
# Build App Bundle (recommended)
flutter build appbundle --release
# Build APK
flutter build apk --release --split-per-abi
Configure iOS app for App Store:
# Build for iOS
flutter build ios --release
# Archive in Xcode
# 1. Open ios/Runner.xcworkspace in Xcode
# 2. Select Product > Archive
# 3. Upload to App Store Connect
iOS configuration in ios/Runner/Info.plist:
<key>CFBundleVersion</key>
<string>$(FLUTTER_BUILD_NUMBER)</string>
<key>CFBundleShortVersionString</key>
<string>$(FLUTTER_BUILD_NAME)</string>
<key>NSCameraUsageDescription</key>
<string>This app needs camera access to take photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs photo library access to select images</string>
Set up automated testing and deployment:
# .github/workflows/ci.yml
name: CI/CD Pipeline
on:
push:
branches: [ main, develop ]
pull_request:
branches: [ main ]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Flutter
uses: subosito/flutter-action@v2
with:
flutter-version: '3.10.0'
channel: 'stable'
- name: Install dependencies
run: flutter pub get
- name: Run tests
run: flutter test
- name: Analyze code
run: flutter analyze
- name: Check formatting
run: dart format --set-exit-if-changed .
build_android:
needs: test
runs-on: ubuntu-latest
if: github.ref == 'refs/heads/main'
steps:
- uses: actions/checkout@v3
- name: Setup Flutter
uses: subosito/flutter-action@v2
with:
flutter-version: '3.10.0'
channel: 'stable'
- name: Setup Java
uses: actions/setup-java@v3
with:
distribution: 'zulu'
java-version: '17'
- name: Install dependencies
run: flutter pub get
- name: Build APK
run: flutter build apk --release
- name: Upload artifacts
uses: actions/upload-artifact@v3
with:
name: apk-release
path: build/app/outputs/flutter-apk/app-release.apk
build_ios:
needs: test
runs-on: macos-latest
if: github.ref == 'refs/heads/main'
steps:
- uses: actions/checkout@v3
- name: Setup Flutter
uses: subosito/flutter-action@v2
with:
flutter-version: '3.10.0'
channel: 'stable'
- name: Install dependencies
run: flutter pub get
- name: Build iOS
run: flutter build ios --release --no-codesign
Implement comprehensive app monitoring:
// services/analytics_service.dart
class AnalyticsService {
static late FirebaseAnalytics _analytics;
static late FirebaseCrashlytics _crashlytics;
static Future<void> initialize() async {
await Firebase.initializeApp();
_analytics = FirebaseAnalytics.instance;
_crashlytics = FirebaseCrashlytics.instance;
// Enable crashlytics collection
await _crashlytics.setCrashlyticsCollectionEnabled(true);
}
static Future<void> logEvent(String name, Map<String, Object>? parameters) async {
await _analytics.logEvent(name: name, parameters: parameters);
}
static Future<void> setUserId(String userId) async {
await _analytics.setUserId(id: userId);
}
static Future<void> setUserProperty(String name, String value) async {
await _analytics.setUserProperty(name: name, value: value);
}
static Future<void> logScreenView(String screenName) async {
await _analytics.logScreenView(screenName: screenName);
}
static void recordError(dynamic error, StackTrace? stackTrace) {
_crashlytics.recordError(error, stackTrace);
}
static Future<void> log(String message) async {
await _crashlytics.log(message);
}
}
// Usage in widgets
class ProductDetailScreen extends StatefulWidget {
final Product product;
const ProductDetailScreen({Key? key, required this.product}) : super(key: key);
@override
_ProductDetailScreenState createState() => _ProductDetailScreenState();
}
class _ProductDetailScreenState extends State<ProductDetailScreen> {
@override
void initState() {
super.initState();
AnalyticsService.logScreenView('product_detail');
AnalyticsService.logEvent('product_viewed', {
'product_id': widget.product.id,
'product_name': widget.product.name,
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.product.name)),
body: Column(
children: [
// Product details
],
),
);
}
}
This comprehensive guide has taken you through the complete Flutter development journey, from basic concepts to production-ready applications. You've learned about widget architecture, state management, networking, testing, performance optimization, and deployment strategies.
With these foundations and best practices, you're equipped to build professional-grade Flutter applications that deliver exceptional user experiences across all platforms while maintaining clean, scalable, and maintainable codebases.
Mobile Development Expert with expertise in Flutter and React Native
Discover more Tutorials content
Starting mobile development with React Native opens doors to cross-platform app creation using familiar web technologies. This beginner-friendly tutorial guides you through building your first React Native application, covering development environment setup, component creation, navigation implementation, state management, platform-specific features, and app store deployment preparation.
Building robust CRUD applications with Vue.js requires understanding component architecture, state management, API integration, and user experience design. This comprehensive tutorial walks through creating a complete Vue.js application from project setup to deployment, covering Vue Router for navigation, Vuex for state management, Axios for API calls, and modern UI patterns that ensure scalable, maintainable code.
Building robust, scalable APIs with Node.js requires following established patterns and best practices that ensure maintainability, security, and performance. This detailed guide covers API architecture design, Express.js framework mastery, database integration patterns, authentication and authorization strategies, error handling, testing methodologies, and deployment optimization for production environments.
Flutter development requires deep understanding of its architecture, performance characteristics, and ecosystem to build production-ready applications that scale effectively. This comprehensive analysis provides an in-depth perspective on Flutter's strengths and limitations, covering widget architecture, state management solutions, platform integration strategies, and performance optimization techniques that enable developers to make informed decisions and build exceptional cross-platform applications.
Cross-platform mobile development with React Native requires careful consideration of design adaptation across iOS and Android platforms. Learn how to transform Figma designs into React Native components that work seamlessly across platforms, including responsive design strategies, platform-specific styling, and performance optimization techniques for mobile applications.
Flutter development requires a properly configured environment that supports cross-platform compilation and testing. This comprehensive setup guide walks through Flutter SDK installation, IDE configuration for VS Code and Android Studio, emulator setup for both iOS and Android, debugging tools configuration, and performance optimization settings that ensure smooth development workflow across all target platforms.
