Author: - Post Category: Mobile Apps - Date:June 16, 2019

Build Mobile Apps With Flutter

Let’s see how to build our first mobile application using flutter, the UI tool kit for compiling native desktop, web, mobile applications developed by Google. The first thing to do is install Flutter, Android studio and Setup our editor, like Visualstudio code. I have everything ready on my local machine so let’s jump into How to Write our

Tags: ,
Mobile application development with flutter

Let’s see how to build our first mobile application using flutter, the UI tool kit for compiling native desktop, web, mobile applications developed by Google.

The first thing to do is install Flutter, Android studio and Setup our editor, like Visualstudio code.
I have everything ready on my local machine so let’s jump into How to Write our fist flutter app.

If you need to install flutter, android studio and setup the editor follow the documentation on the flutter website for your Operative System.

Environment Setup:

https://flutter.dev/docs/get-started/install
https://flutter.dev/docs/get-started/editor#

Write your first app:

Step 1, we need to create a started flutter app.

1. Press Ctrl + shift + p and type Flutter new project
2. type a name for the new application,
as we are following the flutter docs we will call it startup_names
3. Press enter and wait for the app to install.

Step 2, we need to add an external package

Follow the guide and add the external package to the pubspec.yaml file in the project root
import the package at the top of the main.dart file, just after the material library.

https://flutter.dev/docs/get-started/codelab#step-2-use-an-external-package

Step 3, we add a stateful widget

Follow the steps to add a new stateful widget

Step 4, we create an infinite scrolling ListView

Follow the steps to add an infinite scrolling list

Step 5, Add icons to the list

Now we add an icon next to the names in the list, follow the speps
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#3

Step 6, Add interactivity

Here we add interactivity to our app by allowing the user to click on the icon then see a list of saved names in a separate page.

Step 7, Add a route and navigate to a new screen

Here we add a new route to show a second screen where the user can see its list of favourite names

Step 8, Change UI style adding a theme

Now we add a theme to our app so we can customise its look.
sources: