Bài 15: Code với native IOS - Học lập trình Flutter cơ bản

Đăng bởi: Admin | Lượt xem: 4801 | Chuyên mục: Android

Việc truy cập vào các nền tảng riêng của hệ điều hành IOS cũng giống như Android nhưng ta sẽ sử dụng object C hay swift (ngôn ngữ dành riêng cho lập trình IOS) và IOS sdk. Tuy nhiên về khái niệm thì như nhau

Nào, chúng ta sẽ bắt đầu viết một ứng dụng tương tự bài học trước nhưng sử dụng cho nền tảng IOS nhé

Tạo ứng dụng mới trên Android studio (enviroment) trên MacOS với tên "flutter_browser_ios_app"
Từ bước 2 đến bước 6 các bạn làm giống như bài 14( bài trước )
Sau đó các bạn khởi động Xcode , nhấn File->Open
Chọn Xcode project phía dưới ios director của flutter project
Mở AppDelegate.m dưới Runner -> Runner path. Và nó sẽ chứa dòng code sau

#include "AppDelegate.h" 
#include "GeneratedPluginRegistrant.h" 
@implementation AppDelegate 

- (BOOL)application:(UIApplication *)application
   didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
      // [GeneratedPluginRegistrant registerWithRegistry:self];
      // Override point for customization after application launch.
      return [super application:application didFinishLaunchingWithOptions:launchOptions];
   } 
@end

Chúng ta sẽ thêm hàm openBrowser để mở trình duyệt web với url. Nó chấp nhận đối số duy nhất là url

- (void)openBrowser:(NSString *)urlString { 
   NSURL *url = [NSURL URLWithString:urlString]; 
   UIApplication *application = [UIApplication sharedApplication]; 
   [application openURL:url]; 
}

Trong hàm didFinishLaunchingWithOptions, tìm cotroller và đặt nó vào bên trong biến controller

FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;

Trong hàm didFinishLaunchingWithOptions , đặt browser chanel là flutterapp.tutorialspoint.com/browse

FlutterMethodChannel* browserChannel = [
   FlutterMethodChannel methodChannelWithName:
   @"flutterapp.tutorialspoint.com/browser" binaryMessenger:controller];

Tạo biến weakSelf và đặt class hiện tại

__weak typeof(self) weakSelf = self;

Bây giờ ta sẽ implement setMethodCallHandler. Gọi hàm openBrowser bởi call.method. Lấy giá trị url bằng call.arguments và bỏ qua nó khi gọi openBrowser

[browserChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
   if ([@"openBrowser" isEqualToString:call.method]) { 
      NSString *url = call.arguments[@"url"];   
      [weakSelf openBrowser:url]; 
   } else { result(FlutterMethodNotImplemented); } 
}];

Dưới đây là toàn bộ code mẫu, mời bạn đọc cùng tham khảo

#include "AppDelegate.h" 
#include "GeneratedPluginRegistrant.h" 
@implementation AppDelegate 

- (BOOL)application:(UIApplication *)application 
   didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
   
   // custom code starts 
   FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController; 
   FlutterMethodChannel* browserChannel = [
      FlutterMethodChannel methodChannelWithName:
      @"flutterapp.tutorialspoint.com /browser" binaryMessenger:controller]; 
   
   __weak typeof(self) weakSelf = self; 
   [browserChannel setMethodCallHandler:^(
      FlutterMethodCall* call, FlutterResult result) { 
      
      if ([@"openBrowser" isEqualToString:call.method]) { 
         NSString *url = call.arguments[@"url"];
         [weakSelf openBrowser:url]; 
      } else { result(FlutterMethodNotImplemented); } 
   }]; 
   // custom code ends 
   [GeneratedPluginRegistrant registerWithRegistry:self]; 
   
   // Override point for customization after application launch. 
   return [super application:application didFinishLaunchingWithOptions:launchOptions]; 
}
- (void)openBrowser:(NSString *)urlString { 
   NSURL *url = [NSURL URLWithString:urlString]; 
   UIApplication *application = [UIApplication sharedApplication]; 
   [application openURL:url]; 
} 
@end

Mở project setting
Tìm đến Capabilities bật Background Modes.
Thêm *Background fetch và Remote Notification**
Nào, bây giờ ta thử run ứng dụng và nó sẽ làm việc giống như phiên bản Android nhưng là trình duyệt Safari thay vì chrome nhé

Okeyy, vậy là chúng ta đã hoàn thành bài học hôm nay. Bài hôm nay tuy hơi khó nhưng các bạn tìm hiểu thật kỹ thì cũng dễ dàng. Chúc các bạn học tốt

Một số nguồn các bạn có thể tham khảo :

Bài tiếp theo: Giới thiệu về package >>

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!