Setting Up Android Studio For Flutter User Interface API - Hive Programmers

in StemSocial11 months ago

Greetings to everyone and welcome to my favorite Science community online, StemSocial.

It's @skyehi and I'm excited to be back to continue my series on Android App development tutorials for beginners.

Polish_20240125_182842259.pngOriginal Image Source by Mohamed_hassan from Pixabay

For today's blog we're not exactly going to be building an App in particular but I'll be introducing you to a whole new programming APi which I believe can help Android Aop developers improve their App User Interface designs.

Building beautiful looking Apps with smooth User Interfaces is very crucial to the success of your App.

Although Android Studio is equipped with a whole lot of design APIs, tools and classes, I think it's a bit limited when it comes to making epic, extremely beautiful anf professional looking UI.

This is why I'm introducing my readers and followers to Flutter.

In today's episode, we'll dive into how to set up Android Studio to run your awesome Flutter apps!

For the newcomers, Android Studio, crafted by Google, is the best Integrated Development Environments (IDEs) that you'll find handy for creating Android Apps.

2dk2RRM2dZ8gKjXsrozapsD83FxL3Xbyyi5LFttAhrXxr16mCe4arfLHNDdHCBmaJroMz2VbLrf6Rxy9uPQm7Ts7EnXL4nPiXSE5vJWSfR53VcqDUrQD87CZSpt2RKZcmrYrze8KanjkfyS8XmMCcz4p33NZmfHE4S9oRo3wU2.png

Well guys, first things first.

You need to make sure you've got Android Studio 3.0 or a the very latest version installed. Android Studio is thr best IDe to integrate Flutter API and all its elements.

Once Android Studio You've successfully installed Android Studio which I've layed out the steps in countless number of my blogs, we'll start working on integrating Flutter and also Dart plugins.


Here's How To Get Flutter Integrated In Android Studio

  1. Start by Firing up Android Studio Application
  2. For version 3.6.3.0 and beyond, glide over to Settings > Plugins.
  3. Select out the Flutter plugin and give it a sweet "Install" - Now guys ensure that your Internet connection is ok to complete the process
  4. When the Dart add-on gives a Prompt simply continue by clicking on the "Yes." button
  5. We need to restart the Android Studio IDE to effect the change

YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png

Now let's work on the "add-ons"

  • For macOS: Locate Favorites > Add-ons.
  • For Linux and Windows: Navigate to File > Settings > Plugins.

You can try them all on the Marketplace. Simply select the Flutter plugin, and hit "Install."

Ready for the main work now guy? - Let's create an app and introduce Flutter codes and API

  1. After succeeding with the Dart and Flutter plugins installations, open the IDE.
  2. Choose the "Start new Flutter project" option.
  3. Select "Flutter App" as your project type – Click Next.
  4. Keep an eye on the Flutter SDK path. If it's not there, select "Install SDK..." and bring it home.
  5. Name your project (I'll call this one "myapp") and hit Next button.
  6. Seal the deal with a click on the "Done." button.

YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png

Now as usual guys, wait for a moment and let Android Studio do its thing by loading your new project space. Press "Finish" and give it a moment to install the SDK and build the project.

  • If you've been following my series, you'd realize that it's the same procedure fro creating a normal new Android Studio Project

YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png

Here's a Quick tip though:

Some Flutter plugins might play the name game during app creation, asking for your company name in reverse order.

Your company name and project name are joined to form the package name which I explained in previous episodes that it was the ID of the App on Google Play store.

If you're planning to go big on making your App successful, choose the App name and package name wisely now.

Congratulations guys, from these few steps, you've successfully installed flutter and created your first flutter project.

It's going to take practice to master that programming language but I'll definitely be creating a series of that in the future guys so stay tuned.

YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png

Ready for the grand finale? Let's complete that Flutter application:

  1. Locate the main toolbar in Android Studio.
  2. In the target selector, pick the Android device where your app will run.
  3. Click the Go icon in the toolbar or glide to the Go > Go menu.

2dk2RRM2dZ8gKjXsrozapsD83FxL3Xbyyi5LFttAhrXxr16mCe4arfLHNDdHCBmaJroMz2VbLrf6Rxy9uPQm7Ts7EnXL4nPiXSE5vJWSfR53VcqDUrQD87CZSpt2RKZcmrYrze8KanjkfyS8XmMCcz4p33NZmfHE4S9oRo3wU2.png

That's it guys, your first ever Flutter based App will run on your device. You can also run it on an emulator. However I usually prefer the physical Android device so you can have a first hand experience of how your App would really look like on users' device.

Thanks so much for the time. I hope you enjoyed this particular episode. This tutorial was more of an installation and introduction blog.

We'll continue developing Android Apps and improving our Android App Development skills tomorrow.

Have A Great Day And Catch You Next Time On StemSocial. Goodbye 👨‍💻


You Can Follow Me @skyehi For More Like This And Others

Sort:  

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

Thanks for including @stemsocial as a beneficiary, which gives you stronger support. 
 

Congratulations @skyehi! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

You got more than 2250 replies.
Your next target is to reach 2500 replies.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP