Flutter Course — Use Flutter in Existing iOS Project

https://www.alibabacloud.com/blog/is-xianyu-quietly-giving-up-flutter_597991

Flutter is an open-source UI software development kit created by Google. It is used to develop cross-platform applications for Android, iOS, Linux, macOS, Windows, Google Fuchsia, and the web from a single codebase. First described in 2015, Flutter was released in May 2017.

Prerequisite

You already installed flutter in your system, if not follow this link, Basic knowledge of flutter, dart and iOS native code

Getting Started

By Run the following command, you can see now, flutter standalone project is created as shown in Figure 2. The default timer application and you can run as an independent flutter project as well as showin in Figure 2

flutter create --template module my_flutter_app

Figure 1

Figure 2

As shown in Figure 3, This is native iOS code having simple application , which has one pod Kingfisher and the button in the center , what we need to do when we tap on button we need to open a flutter timer screen

Figure 3

As shown in Figure 4, we copy whole my_flutter_app flutter project into roort directory of native iOS code

Figure 4

• Add the following lines to your Podfile:

flutter_application_path = 'my_flutter_app'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

• For each Podfile target that needs to embed Flutter, call install_all_flutter_pods(flutter_application_path).

target 'MyApp' do   
  install_all_flutter_pods(flutter_application_path)
end

1. In the Podfile’s post_install block, call flutter_post_install(installer).

post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end

Figure 5

Then run pod install

As shown in Figure 6 , we created a FlutterEngine, exposed as a property, on app startup in the app delegate.

Figure 6

UIButton hooked to present a FlutterViewController. The FlutterViewController uses the FlutterEngine instance created in the AppDelegate. As you can see in Gif now when I tap on Button it open flutter screen

Figure 7

Gif 1

Few Things

As shown in Figure 8 , There are two folders Development Pods where. we have flutter specific package , if you add more packages to the flutter pubspec it will appear but Flutter and FlutterPluginRegistrant you will see always that is basically doing everything . In Pods folder you will see your native code dependency like Kingfisher.

Theoretically it can possible you can do some configuration and put your native pod dependency in Development Pods as well but for simplicity just ignore it

Figure 8

Remember we added this in our podfile , you can find this file here as well , This is also doing magic to installed flutter and everything and make it avaiable to use in native iOS code

Do not source control the .ios/ directory since it’s autogenerated.

flutter_application_path = 'my_flutter_app'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

Figure 9

As shown in Figure 10, we did a code changes in flutter (increment counter by 2) and run native code from application and it is reflecting , note we open my_flutter_app in VS that is located in the root of bative code

Figure 10

As shown in diff yellow rectangle is fine to push since it include podfile changes and our integration code but 2nd rectangle we don’t want to push since it has flutter code as well and we need to create some mechanism for that since we need to host flutter project into some another repo

Figure 11

Git submodule

A Git submodule is a git tool that allows a user to essentially add a Git repository as a subdirectory of another Git repository. The subdirectory repository will have its own Git system, which means it will have its own commits history, independent from your main repository. This allows you to be able to set your subdirectory to refer to a specific commit you may want to work with.

First delete my_flutter_app from native code root directoy

Figure 12

By deleting this you see now our code diff showing what we change in our native code not our dependent library which is flutter build screen

Figure 13

As shown in Figure 14, we pushed our flutter timer application code into repo https://github.com/aliakhtar49/my_flutter_app

Figure 14

Run application and you will get error since we deleted the flutter code folder, now run pod install you will get error as shown in Figure 16 since no podhelper.rb file exists

Figure 15

Figure 16

Go to this root directory of native code in terminal and run the following command as shown in Figure 17

git submodule add https://github.com/aliakhtar49/my_flutter_app.git

Figure 17

As shown in Figure 18, now with git submodule it downloaded the flutter app and still if you run pod install , you will get same error since podhelper.rb still not exists , for that we need to install first flutter package , so in your native ios root code run following commands

cd my_flutter_app
flutter build ios --simulator
cd ..
pod install

Figure 18

For other developer

• Clone native code
• git submodule update — init — recursive (to download any sub git module)

cd my_flutter_app
flutter build ios — simulator
cd ..
pod install

• Then run application

Terminal Command

Now pushed your native code with the integration is done successfully as you can see no file we are committing that is unknown to us , git submodule add https://github.com/aliakhtar49/my_flutter_app.git auto generated .gitmodules file that keep track of git submodule as shown in Figure 19 and my_flutter_app in Figure 20 donot have entire folder instead commit potinging to out my_flutter_app git submodule

Figure 19

Figure 20

Update The Flutter Code

Approach 1: Here we will first update in flutter repo then push code in flutter repo then update our native code to update to latest git submodule

As shown in Figure 21 , I updated the flutter code now our counter will increment by 3 instead of 2 and I pushed the code in my independent git submodule

Figure 21

Now go the root directory of native ios code

cd my_flutter_app  
git checkout master
git pull 

After run above commands you will see now our native ios code pointing to latest flutter code (git submodule) code, now we can push this code , other developer when who take a pull from master need to run git submodule update — init — recursive

Figure 22

Figure 23

Approach 2: Here we will update in flutter repo in the native code directly and locally test the code

As shown in Figure 24, we open flutter project directly from our native code and did changes which is increment counter by 5 and tested locally without pushing anything, now go to the root directoty of native code

Figure 24

Figure 25

As shown in Figure 26, after we verify everything is working fine we pushed our flutter code changes directly from native code sub git repo, you can also create branch everything what you can do with git thingy

cd my_flutter_app
git add .
git commit -m 'increment by 5'
git push

Figure 26

Now run git pull and quit source tree and open again , in my case as shown in Figure 27 now our git sub module now pointing to latest master, push that code, now out counter will increment by 5

git pull

Figure 27

Useful Links

Integrate a Flutter module into your iOS project

Adding a Flutter screen to an iOS app