Flutter for Designers ( Designcode.io )

Build a cross platform app for iOS and Android

Flutter is a somewhat new toolkit that makes it simple to build cross-platform apps that look beautiful and is not difficult to utilize. By using a platform's native components we'll build an app that can run on the two iOS and Android that will closely resemble it was created natively. Moreover we'll perceive how with one single codebase, Flutter gives us native performance, hot reload for quick turn of events, and admittance to beautiful, native components.

Source Code

You can likewise see the source code for each section in the course in my  GitHub repository.

About this Course

Similar as SwiftUI and React, Flutter utilizes an explanatory UI making it one of the most mind-blowing frameworks for quick plan and improvement. Therefore this course was intended for the two designers and developers. We'll investigate how to make apps for both significant versatile working systems, Android and iOS, with Flutter and its not difficult to-learn Dart programming language. This course is beginner-accommodating and will assist you with dunking your toes into the steadily growing sea that is Flutter. We've loaded this course with configuration stunts and effective work processes to assist you with building extraordinary UIs in record time.

The plan record is in Figma, project assets, and Flutter source code is imparted to you with the goal that you can think about against your own advancement.

 

Prerequisites

While this course is beginner well disposed, it will assist with making them programme insight, particularly one using a revelatory UI. On the off chance that you're coming from a SwiftUI or React/React Native foundation, you ought to find Flutter and Dart truly straightforward.

In this course, I'm running a beta of macOS Enormous Sur and Xcode 12, as well as Android Studio 4.0.1. Fortunately, Flutter has been around for a long while so it isn't needed that you utilize beta applications as I'm certain macOS Catalina and Xcode 11 will work similarly as well. We'll utilize Android Studio to foster our Flutter app so I will direct you in downloading every one of the above applications as well as the Flutter and Dart SDK.

Install Xcode

In the event that you're on a Macintosh, Xcode is an extraordinary device to have. It will give you admittance to the Order Line Apparatuses that are critical for spanning Flutter to iOS. With Xcode, you will likewise gain admittance to the iOS Simulator, a convenient instrument to perceive how you Flutter app will perform. You can download Xcode from the App Store.

Install Android Studio

Android Studio is accessible for both macOS and Windows clients. For Macintosh clients, I suggest downloading Android Studio regardless of whether you have Xcode and VSCode installed. While creating with Flutter, Android Studio gives a rundown of convenient easy routes to accelerate your work process, admittance to Android Virtual Gadgets, and a more profound knowledge to your app's performance and format.

To install Android Studio, you can download the app from the Android Developer website at https://developer.android.com/studio. You'll see download options for your particular framework, either Windows, macOS, Linux, or Chrome operating system.

At the point when you first open Android Studio, you'll be approached to install the Android SDK alongside some other modules to assist with advancement. You ought to adhere to the instructions Android Studio gives you as these modules and projects will be useful for future Android advancement.

Installing the Flutter SDK

Before beginning, you'll require the Flutter and Dart SDK to make cross platform apps. To install Flutter, go to Flutter's installation page where you can adhere to the instructions and download the SDK comparative with your framework. For Macintosh clients, introducing utilizing the Terminal is easier.

Open Terminal and type:

 

mkdir flutter_dev

cd flutter_dev

git clone https://github.com/flutter/flutter.git

 

This will make another folder called flutter_dev and clone the Flutter SDK into the folder.

When the vault has been cloned, open the flutter_dev folder and explore to flutter > container. Duplicate the way to the container folder.

Making a beeline for Terminal, type:

 

vim ~/.zshrc

 

This opens an "rc" document that your Terminal purposes while giving it orders. Press "I" to go into Supplement Mode, look over the entire way to the base, and toward as far as it goes, press enter multiple times to give some space between the finish of the "rc" document and the accompanying line where you will type:

 

export PATH=[PATH_TO_FLUTTER_SDK]/flutter/bin:$PATH

 

Press the colon button, "wq", and the Enter to save and an incredible rc document. This tells terminal where your Flutter SDK is found.

Presently, open another window in Terminal and issue the flutter order. This ought to have Terminal begin to download and install the Dart SDK. After the installation is finished, type flutter — version to confirm that everything is working.

Connecting the Flutter SDK to Android Studio

Open Android Studio and on the startup screen, press the Design button at the base, and select SDK Manager. In the new window that opens up, select Modules from the sidebar, and with the Commercial center tab chose, look for Flutter. The principal result ought to be the one we're searching for. It ought to come from flutter.dev. Click on the Install button and Android Studio will caution you telling you that the Dart module will be installed also. Select Install and following two or three seconds, select Restart IDE.

Making your most memorable Flutter project

On the startup screen, there ought to be another option called Start another Flutter project. Select that button and select Flutter application as your layout. Subsequent to clicking Straightaway, you ought to be taken to a screen where you can design your Flutter application.

Under Project Name, put designcode, and ensure that the Flutter SDK way matches the way where you installed the Flutter SDK. Android Studio ought to naturally distinguish this yet confirming twice is great. Select a Project Location to save your project and you may optionally set a Description. At the point when you're happy with your configuration, press Straightaway.

At long last, you will be approached to set the Bundle Name. Assuming that you're coming from iOS advancement, the bundle name is like the group identifier. I'm setting mine to io.designcode.designcode. Ensuring that all the AndroidX and Platform channel language checkboxes are chosen, click on Finish to have Android Studio make your Flutter project.

Exploring the Example Application

At the point when the project opens up, you'll see that you are in a document called main.dart. On the lefthand side, you will see a sidebar. This sidebar will contain the folders as a whole and libraries related with your Flutter project. Opening the designcode folder, you'll see that there are numerous folders under it. The iOS folder shows the backend Flutter code that assists span the Dart with coding to iOS, the android folder does likewise however for Android, and the web folder is utilized to port our code over to making a web app. Be that as it may, we will working out of the lib folder. This is where the greater part of our code will go. Assuming you open this folder, you can see that there is one record in there: main.dart. This record is likewise the document that the IDE is right now showing to you.

Normally, Flutter convention expresses that main.dart ought to be the document containing the primary() technique, yet this is definitely not an immovable rule. The primary() technique is the principal strategy Flutter searches for while running an app. Inside this strategy, you'll see that Flutter is calling another function called runApp which accepts the class MyApp as an information.

Without carefully describing the situation, you'll see that MyApp is a class that conforms to a kind of StatelessWidget. To see what this example application really does at the present time, at the highest point of our IDE, you'll see a dropdown menu which is as of now set to no gadget chose. Change this to Open iOS Simulator and afterward when the iOS Simulator boots up, press the green play button. This will build and run the app on the simulator.

Hot Reload

One of the benefits of Flutter is that with the integration of Hot Reload, we don't have to continually rebuild our app each time we change our code. To show this, we should roll out a little improvement to the ongoing starter app. With the MyApp class, change the essential sample of ThemeData to the accompanying:

 

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.red,

visualDensity: VisualDensity.adaptivePlatformDensity

),

home: MyHomePage(title: 'Flutter Demo Home Page'),

);

All we did here was change the variety plan of the app from blue to red. Presently in the event that we squeezed CMD+S to save our record (or the lightning button), Android Studio will hot restart our app and we immediately our simulator will mirror those changes. This makes it simple to make configuration changes on the fly.

Figma Layout (optional)

To keep tabs on your development as we foster this application in Flutter, Meng has made a Figma layout for you to follow. The plan records are made accessible to you so you can check how the UI was made.

Import Assets

Assets can be downloaded in the second section of this course, or in the Downloads page. To import assets, intuitive the folders inside the Assets folder.