From the previous article, we tackled Connect Flutter to your Native Android Project it on a step-by-step basis. If ever you missed it, you can read it on this link.

Some developers think that connecting a flutter project to your native project is hard but in this article, we’ll make it simple and easy for you! So, let’s Start!

from https://giphy.com/

Pre-requisite

  1. Xcode
  2. Cocoapods
  3. Flutter & Dart SDK

Integration

To simplify the example, We’ll be creating a new project for both projects. So that it is easier to understand and itemize the setup needed on our sample POC integration.

So let’s assumes…


Photo by Saugat Halder

What is Dart?

Dart is a client optimized programming language for applications on multiple platforms like Mobiles, Web, Desktop, and Servers.

Dart is developed by Google, From October 10 to 12, 2011, Dart was unveiled at the GOTO conference in Denmark. The project is founded Lars Bak and Kasper Lund. Dart version 1.0 was released on November 14th, 2013.

Dart is an object-oriented, garbage collected, class-based language with a C-style type syntax. It can also compile to either native code or javascript.

Got it from Reddit/Giphy

Pillars of Dart

  1. Optimized for User Interface
  • it has mature and also completes async-await for user interfaces containing event-driven code…


In this article, we will tackle Connecting Flutter to your Native Android Project.

I know some of you think that this is impossible but now, it’s possible! Also, you can connect it to your existing projects too!

AGT from Giphy

We all know that it’s not practical to recode the entire application. For these circumstances, Flutter can be integrated into your native project for both Android and iOS.

Things that you need :

  • Native Android Project (New or Existing Project)
  • Flutter
  • Emulator or Actual Device
  • IDE/s (Android Studio and VS Code)

Native Android Project

  1. Create a project.
  2. Let’s add button in your MainActivity


Photo by Christopher Gower by Unsplash

So, we’re back to our Flutter: Widgets for Starter! Now, we’re here for the next part! Just a recap from Flutter: Widgets for Starter Part 1.

  • Introduction to Flutter Widgets
  • Text Widget
  • Container
  • Column
  • Row
  • Expanded

If you missed the article, here’s the link for you! 💙💙💙

Let’s start for Part 2! Are you excited guys?!

GIF by Hannah by giphy

1) Button Widget

In Flutter, Button Widgets are common needs by the users. Flutter has also had several types of buttons like FlatButton, RaisedButton, OutlineButton, and more buttons!

We will tackle buttons for a lot for this session!

  1. Flat Button
  2. Raised Button


Photo by DÉVELOPPEURS from Google Images

In this article, we will tackle the conditional statements. In developing, we want to perform different actions based on the specified condition.

Sometimes we want to execute only a certain condition (true), and in Swift. It is represented fundamentally by the if .. else .. statements. Swift conditional to validate, and then execute the block of code, if that is valid as true.

Here is a simple code for if statement.

As you can see, we used the == comparison operator. We could change that to other operators like != , || , ! and other comparison operators.


Photo by Adi Goldstein by Unsplash

As we all know that in Flutter, Everything is a Widget.

Widgets are fundamental in building blocks of a Flutter app’s user interface. Every single widget is immutable to the user interface. Far from other frameworks, it separates views, layouts, controllers, and properties. Flutter also has a consistent unified model.

A widget can be defined as structural elements, layout aspect, stylish elements, and other more that can be defined as a widget.

That’s all for the introduction for widgets.

You can read more here at this link

GIF by Mediaset España from https://giphy.com/

So, let’s proceed to the Widgets that…


Photo by Fabian Grohs on Unsplash

In Swift, Arrays are used to supply ordered lists of values. Therefore, there is a strict examination which it doesn’t allow you to go an invalid data type within the array.

When the array assigned to a variable, always take note that it will be a positive mutable, Which can be changed. You can add, remove, or even update the existing items on it but if you declare the array as constant, it will be immutable, and the contents are can’t be changed.

  • You can read more about constant and variable at this link.

Here are simple ways to create…


Photo by Maxwell Nelson on Unsplash

Constants and Variables

In Swift, declaring a variable has two types. The constants, and variables. So, that’s the difference between the two?

Well, Constants it’s immutable, meaning it can’t be changed and for the variables, it’s the opposite of the immutable. Which means it can be changed by changing the values.

here’s a simple code.

As we can see, we didn’t have to specify the type of variables, unless it is necessary, owing to the fact that Swift uses type inference, which means the compiler itself will be doing the inferred type of the variable you declared.

Annotations

Also, you can provide…


Recently, Adobe XD released a new version of their plugin that could export your designs directly to flutter codes. Now, you could create your beautiful design in Adobe XD and could export the created design into widgets. In this way, it’s not just saving your time but it makes you easier to create a UI.

In this article, I will show you a short tutorial on how to export your design from Adobe XD to Flutter Codes.

First thing you need to have is the following below:

  1. Flutter [https://flutter.dev/docs/get-started/install](https://flutter.dev/docs/get-started/install)
  2. Adobe XD [https://creativecloud.adobe.com/apps/download/xd](https://creativecloud.adobe.com/apps/download/xd)
  3. Add-on plugin for Adobe XD — XD to…


Credits to the owner of the logo(s)

What is Flutter?

Flutter is a multi-platform, open-source and framework for building Web Applications, Mobile Applications, and Desktop Applications. Also, flutter is a product of Google.

Flutter has a great and organized documentary, That’s why I love using flutter because it gives us a clear vision of the documents, replicates the steps, and more. Also, It’s very easy to learn and currently, it’s getting more and more and more popular nowadays!

References: flutter, netguru

What is Progressive Web Applications (PWA)?

Some of you might have heard Progressive Web Applications (PWA), but do you know about PWA? …

Jan Salvador Sebastian

I’m a Mobile Engineer at @mClinica and Volunteer @ Flutter Philippines. I do explore, build, and share things I’ve learned!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store