Skip to main content

Cách chạy Flutter trên Android/iOS/Web

· 11 min read
admin Hướng Nghiệp Dữ Liệu
admin Hướng Nghiệp Dữ Liệu
Fullstack

Flutter trên các nền tảng

Giới thiệu​

Flutter là một framework phát triển ứng dụng đa nền tảng của Google, cho phép bạn xây dựng ứng dụng cho Android, iOS và Web từ một codebase duy nhất. Bài viết này sẽ hướng dẫn bạn cách cài đặt và chạy ứng dụng Flutter trên các nền tảng khác nhau.

Yêu cầu hệ thống​

Windows​

  • Windows 7 SP1 trở lên (64-bit)
  • Git for Windows
  • Android Studio
  • Visual Studio Code (khuyến nghị)

macOS​

  • macOS 10.14 trở lên
  • Xcode (cho iOS)
  • Android Studio
  • Visual Studio Code (khuyến nghị)

Linux​

  • Ubuntu 18.04 trở lên
  • Android Studio
  • Visual Studio Code (khuyến nghị)

Cài đặt Flutter SDK​

  1. Tải Flutter SDK từ trang chủ Flutter: https://flutter.dev/docs/get-started/install

  2. Giải nén file tải về vào thư mục mong muốn (ví dụ: C:\src\flutter trên Windows)

  3. Thêm đường dẫn Flutter vào biến môi trường PATH:

    • Windows: Thêm C:\src\flutter\bin vào PATH
    • macOS/Linux: Thêm export PATH="$PATH:pwd/flutter/bin" vào ~/.bashrc hoặc ~/.zshrc

  4. Kiểm tra cài đặt bằng lệnh:

flutter doctor

Cài đặt cho Android​

  1. Cài đặt Android Studio từ: https://developer.android.com/studio

  2. Cài đặt Android SDK:

    • Mở Android Studio
    • Vào Tools > SDK Manager
    • Chọn "SDK Platforms" và cài đặt Android SDK
    • Chọn "SDK Tools" và cài đặt:
      • Android SDK Build-Tools
      • Android SDK Command-line Tools
      • Android Emulator
      • Android SDK Platform-Tools

  3. Tạo máy ảo Android (AVD):

    • Mở Android Studio
    • Vào Tools > AVD Manager
    • Click "Create Virtual Device"
    • Chọn thiết bị và phiên bản Android
    • Hoàn tất quá trình tạo AVD

  4. Kiểm tra cài đặt:

flutter doctor --android-licenses
flutter doctor

Cài đặt cho iOS (chỉ macOS)​

  1. Cài đặt Xcode từ Mac App Store

  2. Cài đặt các công cụ dòng lệnh:

xcode-select --install
  1. Chấp nhận giấy phép Xcode:
sudo xcodebuild -license accept
  1. Cài đặt CocoaPods:
sudo gem install cocoapods
  1. Kiểm tra cài đặt:
flutter doctor

Cài đặt cho Web​

  1. Bật hỗ trợ web trong Flutter:
flutter config --enable-web
  1. Kiểm tra cài đặt:
flutter doctor

Tạo và chạy ứng dụng Flutter​

Tạo ứng dụng mới​

flutter create my_app
cd my_app

Chạy trên Android​

  1. Kết nối thiết bị Android:

    • Bật chế độ Developer Options trên điện thoại
    • Bật USB Debugging
    • Kết nối điện thoại với máy tính qua USB
    • Chấp nhận yêu cầu debug trên điện thoại

  2. Kiểm tra thiết bị đã kết nối:

flutter devices
  1. Chạy ứng dụng:
flutter run

Chạy ứng dụng Flutter trên Android

Khi chạy lệnh flutter run, bạn sẽ thấy:

  • Terminal hiển thị quá trình build và chạy ứng dụng
  • Ứng dụng được cài đặt và chạy trên thiết bị Android
  • Giao diện ứng dụng hiển thị với AppBar, nội dung và nút Floating Action Button
  • Có thể sử dụng các phím tắt để tương tác với ứng dụng

Chạy trên iOS (chỉ macOS)​

  1. Mở Xcode và chấp nhận giấy phép

  2. Kết nối thiết bị iOS hoặc khởi động máy ảo iOS

  3. Chạy ứng dụng:

flutter run

Chạy trên Web​

  1. Chạy ứng dụng:
flutter run -d chrome

Các lệnh hữu ích​

Kiểm tra thiết bị đang kết nối​

flutter devices

Chạy trên thiết bị cụ thể​

flutter run -d <device-id>

Build ứng dụng​

Android:

flutter build apk

iOS:

flutter build ios

Web:

flutter build web

Xử lý lỗi thường gặp​

Lỗi Android SDK​

  • Kiểm tra biến môi trường ANDROID_HOME
  • Cập nhật Android SDK Tools
  • Chấp nhận giấy phép Android SDK

Lỗi iOS​

  • Cập nhật Xcode
  • Chạy pod install trong thư mục ios
  • Kiểm tra quyền truy cập

Lỗi Web​

  • Xóa thư mục build: flutter clean
  • Cập nhật Flutter: flutter upgrade
  • Kiểm tra phiên bản Chrome

Kết luận​

Flutter cung cấp một cách tiếp cận thống nhất để phát triển ứng dụng đa nền tảng. Với các hướng dẫn trên, bạn có thể bắt đầu phát triển ứng dụng Flutter cho Android, iOS và Web. Hãy nhớ luôn cập nhật Flutter SDK và các công cụ phát triển để có trải nghiệm tốt nhất.

Tài liệu tham khảo​

Cấu hình IDE​

Visual Studio Code​

  1. Cài đặt Flutter và Dart extensions:

    • Mở VS Code
    • Vào Extensions (Ctrl+Shift+X)
    • Tìm và cài đặt:
      • Flutter
      • Dart
      • Flutter Widget Snippets
      • Awesome Flutter Snippets

  2. Cấu hình VS Code:

    • Format on Save: Bật tính năng tự động format code
    • Flutter Hot Reload: Cấu hình phím tắt
    • Flutter DevTools: Cài đặt công cụ debug

Android Studio​

  1. Cài đặt Flutter và Dart plugins:

    • Mở Android Studio
    • Vào File > Settings > Plugins
    • Tìm và cài đặt:
      • Flutter
      • Dart

  2. Cấu hình Android Studio:

    • Flutter SDK Path: Chỉ định đường dẫn Flutter SDK
    • Dart SDK Path: Tự động phát hiện
    • Flutter Hot Reload: Cấu hình phím tắt

Cấu trúc dự án Flutter​

my_app/
├── android/          # Mã nguồn Android
├── ios/             # Mã nguồn iOS
├── lib/             # Mã nguồn Dart chính
│   ├── main.dart    # Điểm khởi đầu ứng dụng
│   ├── screens/     # Các màn hình
│   ├── widgets/     # Các widget tái sử dụng
│   ├── models/      # Các model dữ liệu
│   ├── services/    # Các service
│   └── utils/       # Các tiện ích
├── test/            # Unit tests và widget tests
├── web/             # Mã nguồn Web
└── pubspec.yaml     # File cấu hình dự án

Quản lý dependencies​

Thêm package mới​

  1. Tìm package trên pub.dev
  2. Thêm vào pubspec.yaml:
dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0
  provider: ^6.0.5
  1. Cài đặt dependencies:
flutter pub get

Cập nhật dependencies​

flutter pub upgrade

Hot Reload và Hot Restart​

Hot Reload​

  • Giữ nguyên state của ứng dụng
  • Cập nhật UI và logic
  • Phím tắt: r trong terminal hoặc Ctrl+S trong VS Code

Hot Restart​

  • Reset toàn bộ ứng dụng
  • Mất state hiện tại
  • Phím tắt: R trong terminal hoặc Ctrl+Shift+S trong VS Code

Debug và Testing​

Debug​

  1. Sử dụng print:
print('Debug message');
  1. Sử dụng debugPrint:
debugPrint('Debug message with timestamp');
  1. Sử dụng breakpoints trong IDE

Unit Testing​

void main() {
  test('Counter increments', () {
    final counter = Counter();
    counter.increment();
    expect(counter.value, 1);
  });
}

Widget Testing​

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    expect(find.text('0'), findsOneWidget);
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();
    expect(find.text('1'), findsOneWidget);
  });
}

Tối ưu hóa hiệu suất​

Build Release​

# Android
flutter build apk --release

# iOS
flutter build ios --release

# Web
flutter build web --release

Tối ưu hóa hình ảnh​

  1. Sử dụng Image.asset với cacheWidth và cacheHeight
  2. Nén hình ảnh trước khi sử dụng
  3. Sử dụng const cho các widget tĩnh

Tối ưu hóa memory​

  1. Sử dụng const constructor
  2. Tránh tạo widget không cần thiết
  3. Sử dụng ListView.builder thay vì ListView

Triển khai ứng dụng​

Android​

  1. Tạo keystore:
keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload
  1. Cấu hình android/app/build.gradle:
android {
    signingConfigs {
        release {
            storeFile file("upload-keystore.jks")
            storePassword "******"
            keyAlias "upload"
            keyPassword "******"
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }
}
  1. Build APK:
flutter build apk --release

iOS​

  1. Cấu hình Xcode:

    • Chọn team development
    • Cấu hình Bundle Identifier
    • Cấu hình version và build number

  2. Archive và upload:

    • Product > Archive
    • Distribute App

Web​

  1. Build cho production:
flutter build web --release
  1. Triển khai lên hosting:
    • Firebase Hosting
    • GitHub Pages
    • Netlify
    • Vercel

Các công cụ hữu ích​

Flutter DevTools​

  1. Khởi động DevTools:
flutter run --debug
  1. Tính năng chính:
    • Performance profiling
    • Memory analysis
    • Network inspection
    • Widget inspector

Flutter Inspector​

  1. Mở trong IDE
  2. Kiểm tra widget tree
  3. Debug layout issues

Flutter Performance​

  1. Timeline view
  2. Frame rendering
  3. Memory usage

Best Practices​

Code Style​

  1. Tuân thủ Dart Style Guide
  2. Sử dụng flutter format để format code
  3. Sử dụng flutter analyze để kiểm tra lỗi

Architecture​

  1. Sử dụng BLoC hoặc Provider cho state management
  2. Tách biệt business logic và UI
  3. Sử dụng repository pattern

Performance​

  1. Tránh rebuild không cần thiết
  2. Sử dụng const constructor
  3. Tối ưu hóa hình ảnh và assets

Tài nguyên học tập​

Documentation​

Courses​

Communities​

Chạy và hiển thị kết quả trên Android​

Tạo ứng dụng mẫu​

  1. Tạo project mới:
flutter create my_first_app
cd my_first_app
  1. Mở file lib/main.dart và thay thế nội dung:
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(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Bạn đã nhấn nút này nhiều lần:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Tăng',
        child: const Icon(Icons.add),
      ),
    );
  }
}

### Chạy ứng dụng trên Android

1. Kết nối thiết bị Android:
   - Bật chế độ Developer Options trên điện thoại
   - Bật USB Debugging
   - Kết nối điện thoại với máy tính qua USB
   - Chấp nhận yêu cầu debug trên điện thoại

2. Kiểm tra thiết bị đã kết nối:
```bash
flutter devices
  1. Chạy ứng dụng:
flutter run

Các phím tắt khi chạy ứng dụng​

  • r: Hot reload (cập nhật UI mà không mất state)
  • R: Hot restart (khởi động lại ứng dụng)
  • q: Thoát ứng dụng
  • p: Hiển thị widget tree
  • o: Chuyển đổi giữa Android và iOS
  • w: Chuyển sang chế độ web

Debug trên thiết bị Android​

  1. Sử dụng Flutter DevTools:
flutter run --debug
  1. Mở DevTools trong trình duyệt:
    • Performance tab: Kiểm tra hiệu suất
    • Memory tab: Kiểm tra bộ nhớ
    • Network tab: Kiểm tra kết nối mạng
    • Widget Inspector: Kiểm tra cấu trúc widget

Xử lý lỗi thường gặp trên Android​

  1. Lỗi "Waiting for another flutter command to release the startup lock":
rm ~/flutter/bin/cache/lockfile
  1. Lỗi "Failed to install the following Android SDK packages":
flutter doctor --android-licenses
  1. Lỗi "Unable to find git in your PATH":
    • Cài đặt Git
    • Thêm Git vào PATH

Tối ưu hóa hiển thị trên Android​

  1. Cấu hình AndroidManifest.xml:
<manifest ...>
    <application
        android:label="My First App"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>
  1. Cấu hình styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

Tạo APK để cài đặt​

  1. Build APK:
flutter build apk
  1. Cài đặt APK:
flutter install

hoặc tìm file APK tại:

build/app/outputs/flutter-apk/app-release.apk

Kiểm tra hiệu suất​

  1. Sử dụng Flutter Performance:
flutter run --profile
  1. Kiểm tra các chỉ số:
    • FPS (Frames per second)
    • Memory usage
    • CPU usage
    • GPU usage

Tùy chỉnh giao diện Android​

  1. Thay đổi theme:
MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
    useMaterial3: true,
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    useMaterial3: true,
  ),
  themeMode: ThemeMode.system,
  // ...
)
  1. Tùy chỉnh status bar:
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
  ),
);
  1. Tùy chỉnh navigation bar:
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.white,
    systemNavigationBarIconBrightness: Brightness.dark,
  ),
);