Flutter Workshop - Introduction to Mobile Developement with flutter

Flutter Workshop - Introduction to Mobile Developement with flutter

In this workshop, we will create a simple mobile app written in Dart with the flutter SDK. Flutter SDK is a tool created by Google that lets us create apps for Android, iOS, Linux, Mac, Windows, Web Platforms and Google Fuchsia from a single code base, that makes it easier for us to develop multi-platform apps easily.

Flutter Workshop - Introduction to Mobile Developement with flutter

In this workshop, we will create a simple mobile app written in Dart with the flutter SDK. Flutter SDK is a tool created by Google that lets us create apps for Android, iOS, Linux, Mac, Windows, Web Platforms and Google Fuchsia from a single code base, that makes it easier for us to develop multi-platform apps easily.

For this workshop, we strongly recommand you to use Android Studio with the integrated Emulator on android API 28.

Step 0: Setup

Before starting, you must complete the steps defined in the SETUP.md file in order for this workshop to go smoothly SETUP.md.

Step 0.5: Display a task to do

In the page1.dart file, you can see a stateless widget class called TodoList, inside there is a member function called _buildTodo taking a Todo (class in the Todotype.dart file), try to use it to display the _firstTodo task!

Here's what it should look like once done:

Step 1: Display an actual list

Now that you know how to display one task, why not display an actual list ? Try displaying the _toddItems list of tasks by editing the _buildToDoList member function and putting it to use.

Here's what it should look like once done:

You may want to use this

Step 2: Fetch the list from an Database

Congratulations ! You now know how to display a todo list ! But wouldn't it be better if we fetched it from an database ?

You can see that we already made the database for you, you just have to use it using the member functions of the db object in the TodoList widget !

Edit the TodoList widget in order to fetch the tasks using the getItem function of the database db and passing the result to the _buildToDoList member function.

/!\ As you can see in the Storage.dart file, the getItem function is asynchronous, you may really want to look at the hint below /!\

Here's what it should look like once done:

Here's a little hint

Step 2.5: Show your users that their data is loading

When you are waiting for data from an asynchronous function, it's better to clearly show to your users that something is loading.

Try to do so using for example a circular loading indicator.

It should look like this when data is loading:

Step 3: Add a button to create tasks

Now we can properly display a Todo list, but we can't add tasks yet, try adding a button that leads to a page where you can create a new task.

Here's a simple example of what it could look like:

Step 4: Take a snap! (and display it)

/!\ For this step, be sure that you have edited your AndroidManifest.xml as stated in the SETUP.md file /!\

In this step we are done with the first page! Open the page2.dart file.

You can see a stateful widget called ImagePage

If you run the app and go to this page, you will see two buttons, when pressed, the "From camera" button will call the _getImageFromCamera method, and the "From gallery" button will call the _getImageFromGallery method. You have to write those two methos (they are very simillar), but you also have to display the image you just picked !

Edit the _ImagePageState class to your heart's content in order for it to work !

You may want to add another element to the ListView's child array to display the image For this step, we will use the image_picker package

When an image is selected, your screen should look like this.

Bonus

Congratulations on finishing the workshop ! Although you have finished the workshop, here's a little list of some bonuses you could add to your project

  • Build an APK of your app in order to test it on your phone
  • Adding a pull to refresh feature to your todo list
  • Adding a way to toggle DONE/TO DO to your TodoList, for example toggling by clicking on the task status in the list.
  • Adding a Update/Delete task functionnality.
  • Changing the appearance of tasks in the todo list
  • Adding new pages to the BottomNavigationBar in the main.dart file
  • Fetch an image from the internet (a link to an image for example) and display it
  • Keep the info while changing pages, with a provider for example.
  • Adding a dark theme to your app
  • Add a google maps integration (may be time consuming)

Download Details:

Author: LightFox7

Source Code: https://github.com/LightFox7/Flutter_Workshop

flutter dart mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Google's Flutter 1.20 stable announced with new features - Navoki

Google has announced new flutter 1.20 stable with many improvements, and features, enabling flutter for Desktop and Web

Top 25 Flutter Mobile App Templates in 2020

Flutter has been booming worldwide from the past few years. While there are many popular mobile app development technologies out there, Flutter has managed to leave its mark in the mobile application development world. In this article, we’ve curated the best Flutter app templates available on the market as of July 2020.

Flutter App Development Trends 2020

As the new decade dawns upon us, a slew of technologies has been making a lot of noise to grab the developers’ attention. While native app development is going strong, the trade winds are now blowing towards going cross-platform.

How To Succeed In Mobile App Wireframe Design?

This article covers everything about mobile app wireframe design: what to do and what not, tools used in designing a mobile or web app wireframe, and more.

Top 10 Mobile App Development Companies in India

The mobile application scenario has been continually changing over the years. In recent years India has become a center for mobile app development companies. The increase of smartphones has instantly increased the requirements for these apps. Every year new technological trends occur due to contin