Mobile AppsNổi bật
Flutter Mobile App Development
Hoang Van E
Mobile Developer
8 tháng 1, 202508-01
10p
934 lượt xem934
#Flutter#Dart#Mobile Development#Cross-platform
Flutter Mobile App Development
Xây dựng mobile app cross-platform với Flutter hiệu quả.
Setup và Widget cơ bản
DART
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _counter = 0;
List<String> _items = [];
void _incrementCounter() {
setState(() {
_counter++;
_items.add('Item $_counter');
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter App'),
elevation: 0,
),
body: Column(
children: [
Container(
padding: EdgeInsets.all(20),
child: Text(
'You have pushed the button $_counter times:',
style: Theme.of(context).textTheme.headline6,
),
),
Expanded(
child: ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
return Card(
margin: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
child: ListTile(
leading: CircleAvatar(
child: Text('1'),
),
title: Text(_items[index]),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {
setState(() {
_items.removeAt(index);
});
},
),
),
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
HTTP Requests và State Management
DART
import 'package:http/http.dart' as http;
import 'dart:convert';
class ApiService {
static const String baseUrl = 'https://api.example.com';
static Future<List<User>> getUsers() async {
try {
final response = await http.get(
Uri.parse('$baseUrl/users'),
headers: {'Content-Type': 'application/json'},
);
if (response.statusCode == 200) {
List<dynamic> jsonData = json.decode(response.body);
return jsonData.map((json) => User.fromJson(json)).toList();
} else {
throw Exception('Failed to load users');
}
} catch (e) {
throw Exception('Network error: $e');
}
}
static Future<User> createUser(User user) async {
final response = await http.post(
Uri.parse('$baseUrl/users'),
headers: {'Content-Type': 'application/json'},
body: json.encode(user.toJson()),
);
if (response.statusCode == 201) {
return User.fromJson(json.decode(response.body));
} else {
throw Exception('Failed to create user');
}
}
}
class User {
final int id;
final String name;
final String email;
User({required this.id, required this.name, required this.email});
factory User.fromJson(Map<String, dynamic> json) {
return User(
id: json['id'],
name: json['name'],
email: json['email'],
);
}
Map<String, dynamic> toJson() {
return {
'id': id,
'name': name,
'email': email,
};
}
}
Provider State Management
DART
import 'package:flutter/foundation.dart';
import 'package:provider/provider.dart';
class UserProvider with ChangeNotifier {
List<User> _users = [];
bool _isLoading = false;
String? _error;
List<User> get users => _users;
bool get isLoading => _isLoading;
String? get error => _error;
Future<void> fetchUsers() async {
_isLoading = true;
_error = null;
notifyListeners();
try {
_users = await ApiService.getUsers();
} catch (e) {
_error = e.toString();
} finally {
_isLoading = false;
notifyListeners();
}
}
Future<void> addUser(User user) async {
try {
final newUser = await ApiService.createUser(user);
_users.add(newUser);
notifyListeners();
} catch (e) {
_error = e.toString();
notifyListeners();
}
}
}
// Usage in widget
class UserListPage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Users')),
body: Consumer<UserProvider>(
builder: (context, userProvider, child) {
if (userProvider.isLoading) {
return Center(child: CircularProgressIndicator());
}
if (userProvider.error != null) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Error: '),
ElevatedButton(
onPressed: () => userProvider.fetchUsers(),
child: Text('Retry'),
),
],
),
);
}
return ListView.builder(
itemCount: userProvider.users.length,
itemBuilder: (context, index) {
final user = userProvider.users[index];
return ListTile(
title: Text(user.name),
subtitle: Text(user.email),
);
},
);
},
),
);
}
}
Performance tip: Sử dụng const constructors và avoid rebuilding unnecessary widgets!
Kết luận
Flutter cho phép tạo mobile apps beautiful và performant với single codebase.
Hoang Van E
Mobile Developer chuyên Flutter và React Native.