Flutter: A Beginner's BluePrint

 Through Flutter, we can create cross platform applications which can run in various platforms mobile,desktop,embedded system and many more. This guide provides a detailed overview of the process for building and running an application within the Flutter ecosystem.To this end, I will showcase a basic application that incorporates visual representations of standard algorithms found in the B.Tech syllabus.

Step 1: Check the requirements

• Download and install VS code from https://code.visualstudio.com/download
• Download and install flutter sdk from https://docs.flutter.dev/install/manual
• Download and install android sdk  and android studio from( https://developer.android.com/studio?gclsrc=aw.ds&gad_source=1&gad_campaignid=21831783555&gbraid=0AAAAAC-IOZnJ0RRNNsPbcZxNgsUDX7Hc0&gclid=CjwKCAjwwdbPBhBgEiwAxBRA4UjAAgBcZEcl6QFt84bjWZyqc75fz6vKUylWa1xPIz0IwfVaVnVwEBoC4ykQAvD_BwE)
• after instaling flutter
• go to command prompt 
• write "flutter doctor" and press "Enter"
• complete every task where Red Cross(X) sign is showing
• to get "green tick" in network resources, connect your computer to internet via network resources
• if you want to for desktop apps also, then you need to download "Visual Studio", otherwise it is completely optional
• after installing android studio, go thorugh it and install some packages to get "green tick" in "android toolchain" option in "flutter doctor" command 

Step 2: Initialize a new Flutter project

• Go to the folder where you want to store the project
• Then right click on your mouse and select "open with VS code"(make sure VS code is installed in your system, if not, install it and then continue from this step)

fig 1: initiation of flutter project

• After that, the VS code is opened. Now in the VS code environemnt, press "CTRL"+ "Shift"+"P" to open command pallete. In the menu, select "Flutter:New Project"   

fig 2: command pallete in VS Code

• Then another menu appears. There select "Application"

fig 3: flutter template in VS code

• after that a a browsing UI of the system will appear. There select the folder where you want to store your flutter project and after finding the folder, click  "Select a folder to create project"
• After that,a final textbox appears in which we have to put our project name and press "Enter". i am naming this project or app "algo_visual"

fig 4: flutter project name

• Now the VS code will take some time to build the environment where we can write, test out flutter code.

fig 5: flutter project directory

• in the "lib" folder, we write our codes which are related to UI and Logic of the app we want to build.

Step 3: Flutter folder structure and their importance

Here is a quick guide about different folders in project directory

 

Folder Name	Primary Role	Manual Editing Required?
lib/	Core Dart logic and UI code.	Yes (Constant development)
android/ , ios/, web/, linux/, macos/, windows/	Native platform configurations.	Occasionally (Permissions/Icons)
test/	Quality assurance and testing code.	Yes (During TDD)
build/	Compiled output and binaries.	No (Auto-generated)
pubspec.yaml	Dependency and asset management.	Yes (Adding packages)

Table 1: folders present in the project directory

Step 4: Building and Testing the application

 

 1) Build:

• Now we will build the application that incorporates visual representations of standard algorithms
• Every logic we write for this app, will go inside "lib" folder from now on
• for ease, here is the github repository link (https://github.com/Suranjan-29/algo_visual/tree/main/lib) where you can find the codes that are necessary for the app
• Either you manually copy this to your system or  use a git command in your vs code terminal (git clone <repository_url>)

fig 6: "lib" folder

• now you will se some sub-folders in "lib" has red color and when we click on them, errors are shown for some certain lines or functions. This happens because the code need some packages to run those lines and functions and we did not include them in our "pubspec.yaml" file.
• To include the files we have 2 ways -  a.) manual(check for every error manually and update pubspec.yaml from the "Flutter Docs" in the web). b) Terminal (we apply this method)
• Open Terminal in your VS code and type "flutter pub get" and press "Enter"
• After some moments , the red mark will be erased from the folders, which means that the code has all its required dependencies to test and run the app.

 2) Debug and Run

• To check how our app is working, we can check it in 2 ways - a) virtual(emulator or web-view) b) physical(the smartphone which we use daily)
• lets check the virtual method(here we are checking as web-view. for emulator,use GenyMotion software )
• open terminal
• write "flutter run"
• choose where you want to run your app virtually and give the input
•   now it will take some time to appear on the screen

fig 7: terminal commands for virtual preview of the app

fig 8:  virtual preview of the app

• now lets check the physical method
• connect your smartphone to the computer or laptop with an usb cable
• now go to the settings of your phone and find "build number". Tap on that number 7 times to enable "developer mode" in your phone 
• once the developer mode is enabled, search for "USB debugging" in developer mode and enable it.
•  now go back to the flutter directory on your system and - 
• open terminal
• write "flutter run"
• Now the options will not come to choose devices, instead, the app UI will launch to the smartphone once the process is completed

fig 9:  commands to launch app UI into physical device

fig 10: app UI into physical device

Step 5: Build the APK 

• After successfully debugging and testing the app, we need to build the .apk file of the app.
• go to the terminal
• write "flutter build apk" 
• this command creates  a highly optimized, production-ready version of  the Android application
• when the process is finished, the location of the apk will be mentioned in the terminal

fig 11:  .apk file build of the app

• Default icon for the apk file is 

fig 12:  Default icon of the app

With these basics, you’re ready to build and run your own Flutter apps. Use this foundation to showcase your creativity and experiment with new algorithm-based projects. Stay tuned for the next post as we dive deeper into Flutter architecture and level up our skills together.